Question

I tried looking for posts like this one but although many are similar, none address my problem properly.

Here’s my situation:

I have two select menus, Country and State, one of top of the other. Their default values are “-Select-“.

If the user selects another country different than United States or Canada, the State select menu should hide and a regular text field should show (see HTML structure below). If, after selecting United States or Canada the user decides to select any other country, then the text box that just appeared should hide again and the select menu for State should reappear.

Last, if the user selects United States or Canada at first, nothing happens, the State select stays visible.

Any help you can give me with this, it’s greatly appreciated.

**

This is the basic HTML for this:

Country’s select:

<select name="country">
 <option value="null" selected="selected">&mdash;Select&mdash;</option>
 <option value="United States">United States</option>
 <option value="Canada">Canada</option>
 <option value="null" >-----------------------------------------</option>
 <option value="Albania">Albania</option>
 <option value="Algeria">Algeria</option>
 ...
</select>

State’s select & input:

<select name="state">
 <option value="null" selected="selected">&mdash;Select&mdash;</option>
 <option value="AL">Alabama</option>
 <option value="AK">Alaska</option>
 ...
</select>

 <br>

<input name="textfield" type="text" id="textfield" class="country-textbox">

UPDATE 6/14: sAc’s solution worked perfectly. However, I just thought of something else:

I also decided to include another select menu for the Canadian Provinces (doh!), so now:

1. When Canada is selected, the United States select and the text field should be hidden, and the Canada select should be visible.

2. When United States is selected, the Canada select and the text field should be hidden, and the United States select should be visible.

3. If any other value is selected, the United States and Canada selects should be hidden and the text field visible.

Thanks a million for your help.

UPDATE 6/15: Well, no additional help for the extended version. Thanks anyway everyone.

Answer 1

How about:

$('select[name="country"]').change(function(){
  if ($(this).val() === "United States" || $(this).val() === "Canada")
  {
    $('select[name="state"]').show();
  }
  else
  {
    $('select[name="state"]').hide();
  }
});