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>

州的选择＆amp; 输入

<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！）添加另一个选择菜单，现在：

选择加拿大时，美国选择并隐藏文字字段，加拿大选择应为可见。
选择美国时，应隐藏加拿大选择和文本字段，并选择美国是可见的。
如果选择了任何其他值，则应隐藏美国和加拿大选项并显示文本字段。

万分感谢你的帮助。

更新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();
  }
});

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

4 个答案: