如果使用jquery选择了下拉项,则显示表单字段 [英] Show Form Field if Drop Down Item is Selected Using jquery
问题描述
我正在尝试创建一个下拉字段,如果选择了其他"项目,则会出现一个请指定"文本框.下面仅适用于一个下拉选择字段,但是一旦我添加了第二个选择字段,它便不再起作用.
I'm trying to create a dropdown field where if the "Other" item is selected, then a "Please Specify" text box appears. The below works with just one dropdown select field, but as soon as I add the second select field, it no longer works.
这是我似乎不起作用的东西:
Here's what I have that doesn't seem to work:
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>
任何使这项工作可行的方法吗?谢谢!
Any way to make this work? Thanks!
推荐答案
您去了: http://jsfiddle.net/ecZrE/
您混合了选择器中的某些内容.使用
You mixed up some things in the selectors. Use
$('p select[name=Browser]')
代替
$('form select[name=Browser]')
,因为没有表单元素.但是您的代码段还是不完整.
since there is no form element. But your snippet is incomplete anyway.
另一个错误的选择器是
$('form select option:selected')
因为您忘记了指定选择元素.
because you forgot to specify the select element.
这篇关于如果使用jquery选择了下拉项,则显示表单字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!