jQuery - 几个选择菜单选项使字段显示/隐藏

Question

我尝试寻找这样的帖子，但尽管许多帖子相似，但没有一个能够正确解决我的问题。

这是我的情况：

我有两个选择菜单，国家和州，一个在另一个的顶部。它们的默认值为“-Select-”。

如果用户选择除美国或加拿大以外的其他国家/地区，则州选择菜单应隐藏，并且应显示常规文本字段（请参阅 HTML结构如下）。如果在选择美国或加拿大后，用户决定选择任何其他国家/地区，则刚刚出现的文本框应再次隐藏，并且国家/地区的选择菜单 应该会重新出现。

最后，如果用户首先选择美国或加拿大，则不会发生任何事情，州选择保持可见。

如果您能在这方面给我任何帮助，我将不胜感激。

**

这是基本的 HTML：

国家选择：

<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>

州选择& 输入：

<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">

更新 6/14： sAc 的解决方案运行良好。然而，我只是想到了其他事情：

我还决定为加拿大各省添加另一个选择菜单（doh！），所以现在：

1. 当选择加拿大时，美国 选择，文本字段应隐藏，加拿大 选择应可见。

2. 当选择美国时，加拿大选择和文本字段应隐藏，而美国选择应可见。

3. 如果选择任何其他值，则应隐藏美国和加拿大选择，并且文本字段可见。

感谢一百万您的帮助。

更新 6/15： 好吧，扩展版本没有额外的帮助。无论如何谢谢大家。

Answer 1

怎么样：

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

Answer 2

jQuery！

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

Answer 3

$(document).ready( function(){
    $('select[name="country"]').change( function(){
        var thisval = $(this).val();
        if( thisval !== 'United States' && thisval !== 'Canada' ) {
             $('select[name="state"]').hide();
             $('#textfield').show();
        } else {
             $('select[name="state"]').show();
             $('#textfield').hide();
        }
    });
});

Answer 4

和

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