javascript - 根据选择列表显示/隐藏某些字段

Question

我正在尝试使用 JavaScript 和/或 jQuery 来根据下拉菜单中选择的项目来隐藏某些 html 元素。页面如下所示:

[Drop down menu]

[text field 1]
[text field 2]
[text field 3]
[text field 4]
[text field 5]

下拉菜单有 3 个选项。对于第一个选项，应显示字段 1-4。对于第二个字段，2-4，对于第三个字段，2-5 应该可用。

我有一个 JSFiddle demo here 。具体来说，我不明白为什么

<option value="option3.com" onselect="$('#five').hide()">option3.com</option>

不隐藏“# Five”

Answer 1

首先，没有 onselect，您可能需要 onchange。
其次，您正在使用 jQuery，因此请使用它。
第三，更改标记以某种方式包含您想要的内容，数据属性很棒。

<select style="width: 120px;" name="farm_in" id="farm_in">
    <option></option>
    <option value="option1.com" data-show="[1,2,3,4]">option1.com</option>
    <option value="option2.com" data-show="[2,3,4]">option2.com</option>
    <option value="option3.com" data-show="[2,3,4,5]">option3.com</option>
</select>
<br>
<input style="width: 120px;" type="text" name="one" id="el1" value="one">
<br>
<input style="width: 120px;" type="text" name="two" id="el2" value="two">
<br>
<input style="width: 120px;" type="text" name="three" id="el3" value="three">
<br>
<input style="width: 120px;" type="text" name="four" id="el4" value="four">
<br>
<input style="width: 120px;" type="text" name="five" id="el5" value="five">

那么你所要做的就是

$('#farm_in').change(function() {
    $('input').hide();
    $('#el' + $('option:selected', this).data('show').join(', #el')).show();
});

FIDDLE