Dropdown change not working
-
$(function(){
$("#country").change( function (eventObject) {
if ($("#country").val() == "233") {
$('#state').show();
} else{
$('#state').hide();
}
});
$('#state').change(function(e){
if ($("#state").val() == "1") {
alert('hi');
}
});
});
For some reason, the functionality does not work. It should display the state drop-down when "United States" is chosen (which works) and then whenever someone chooses Alabama (value of 1), it should alert the 'hi' message.
-
<p>
<label for="country">Your Country</label><br />
<select id="country" name="country">
<option value="">Choose a Country:</option>
<option value="1">Afghanistan</option>
<option value="2">Aland Islands</option>
<option value="233">United States</option>
</select>
</p>
<p id="state" style='display:none;'>
<label for="state">Your State</label><br />
<select id="state" name="state">
<option value="">Choose a State:</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
</select>
</p>