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

【问题标题】：jQuery - Several select menu options make a field show/hidejQuery - 几个选择菜单选项使字段显示/隐藏
【发布时间】：2011-03-15 23:51:29
【问题描述】：

我尝试寻找类似这样的帖子，但虽然很多类似，但没有一个能正确解决我的问题。

这是我的情况：

我有两个选择菜单，Country 和 State，一个在另一个之上。它们的默认值为“-Select-”。

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

最后，如果用户一开始选择 United States 或 Canada，没有任何反应，State 选择保持可见。

您能在这方面给我任何帮助，非常感谢。

这是基本的 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！），所以现在：

选择加拿大时，United States选择且文本字段应隐藏，Canada选择应为可见。
当 United States 被选中时，Canada 选择和文本字段应该被隐藏，United States 选择应该可见。
如果选择了任何其他值，则应隐藏 United States 和 Canada 选择并且文本字段可见。

感谢您的帮助。

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

【问题讨论】：

标签： jquery select

【解决方案1】：

怎么样：

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

【讨论】：

是的，同样的事情。你很快。
您的解决方案效果很好！谢谢sac。但是，我添加了一个需要帮助的新功能。我弄乱了你的代码，但老实说我无法破译如何去做。提前致谢。

【解决方案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();
        }
    });
  });

【讨论】：

【解决方案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();
        }
    });
});

【讨论】：

【解决方案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();
  }
});

【讨论】：