如果使用 jquery 选择了下拉项目，则显示表单字段答案

【问题标题】：Show Form Field if Drop Down Item is Selected Using jquery如果使用 jquery 选择了下拉项目，则显示表单字段
【发布时间】：2013-08-07 22:39:11
【问题描述】：

我正在尝试创建一个下拉字段，如果选择了“其他”项，则会出现“请指定”文本框。以下仅适用于一个下拉选择字段，但是一旦我添加了第二个选择字段，它就不再起作用了。

这是我所拥有的似乎不起作用的东西：

CSS...

#techother{display:none;}
#lmsother{display:none;}

身体...

<p>Chose Your Browser: <select name = "Browser" required>
        <option value = "">-- Select an Option --</option>
        <option value = "1">IE</option>
        <option value = "2">FF</option>
        <option value = "3">Safari</option>
        <option value = "4">Opera</option>
        <option value = "5">Other</option>
        </select>
    </p>
  <div id="browserother">
    <p>Please Specify: <label id="browserlabel"><input name="Other Browser" type="text" placeholder="Other Browser" size="50" /></label></p>
    </div>

    <p>Operating System: <select name = "OS" required>
        <option value = "">-- Select an Option --</option>
        <option value = "Win">Windows</option>
        <option value = "ios">iOS</option>
        <option value = "otheros">Other</option>
        </select>
    </p>
  <div id="osother">
    <p>Please Specify: <label id="oslabel"><input name="Other OS" type="text" placeholder="Other OS" size="50" /></label></p>
  </div>

脚本...

  <script>
$('form select[name=Browser]').change(function(){
  if ($('form select option:selected').val() == '5'){
    $('#browserother').show();
  }else{
    $('#browserother').hide();
  }
});

$('form select[name=OS]').change(function(){
  if ($('form select option:selected').val() == 'otheros'){
    $('#osother').show();
  }else{
    $('#osother').hide();
  }
});
</script>

有什么方法可以让这个工作？谢谢！

【问题讨论】：

标签： jquery forms

【解决方案1】：

试试这个演示：http://jsfiddle.net/2pM3n/1/

$('select[name=Browser]').change(function () {
    if ($(this).val() == '5') {
        $('#browserother').show();
    } else {
        $('#browserother').hide();
    }
});

$('select[name=OS]').change(function () {
    if ($(this).val() == 'otheros') {
        $('#osother').show();
    } else {
        $('#osother').hide();
    }
});

【讨论】：

【解决方案2】：

你去：http://jsfiddle.net/ecZrE/

你在选择器中混淆了一些东西。使用

$('p select[name=Browser]')

而不是

$('form select[name=Browser]')

因为没有表单元素。但是你的 sn-p 是不完整的。

另一个错误的选择器是

$('form select option:selected')

因为你忘了指定选择元素。

【讨论】：