文章/答案/技术大牛

发布

社区首页 >问答首页 >基于选择列表显示/隐藏某些字段

问基于选择列表显示/隐藏某些字段
EN

Stack Overflow用户

提问于 2014-09-10 17:14:02

回答 3查看 1.1K关注 0票数 0

我试图使用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演示。特别是，我不明白为什么

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

不会隐藏‘#5’

javascript

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-09-10 17:21:10

首先，没有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();
});

小提琴

票数 1

Stack Overflow用户

发布于 2014-09-10 17:22:33

首先，这并不能识别DOM中的元素：

$('#five')

您没有带有id of "five"的元素。相反，你要找的是：

$('input[name="five"]')

(或者，反过来说，您可以向元素提供一个id属性。)

除此之外，我不知道option元素的任何option事件。为什么不转而响应select的select事件(并且在做标记时与标记分离)：

$('select').on('change', function () {
    if ($(this).val() === 'option3.com') {
        $('input[name="five"]').hide();
    } else {
        $('input[name="five"]').show();
    }
});

票数 1

Stack Overflow用户

发布于 2014-09-10 17:27:27

看着你，你正在丢失你的文本字段的ID属性。

<input style="width: 120px;" type="text" name="five" value="five">

应：

另外，我建议将JS从HTML中分离出来。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25771293

复制

相似问题

问基于选择列表显示/隐藏某些字段
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于选择列表显示/隐藏某些字段EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于选择列表显示/隐藏某些字段
EN