根据下拉框选择显示表单的不同元素 [英] Show different elements of a form depending on dropdown box selection
本文介绍了根据下拉框选择显示表单的不同元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
因此,我有一个包含下拉列表和表单的页面.而我想做的取决于我要隐藏并显示表单不同部分的下拉列表中选择的选项.
So I have a page that has a dropdown list and form. And what I want to do is depending on the option selected in the dropdown list I want to hide and show different parts of the form.
<select id="myselect>
<option id="option1">Option_1</option>
<option id="option2">Option_2</option>
<option id="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" />
<input id="input_2" name="input_2" type="text" />
<input id="input_3" name="input_3" type="text" />
</form>
因此,如果选择了Option_1,则在隐藏input_2的同时显示input_1和input_3
So if Option_1 is selected then show input_1 and input_3, while hiding input_2
推荐答案
我设法通过在选项标签中添加'value'属性来解决您的问题:
i managed to get your issue resolved by adding a 'value' attribute to your option tags:
<select id="myselect">
<option id="option1" value="option1">Option_1</option>
<option id="option2" value="option2">Option_2</option>
<option id="option3" value="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" placeholder="input_1"/>
<input id="input_2" name="input_2" type="text" placeholder="input_2"/>
<input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>
并使用jquery .change()事件:
and using the jquery .change() event:
$select = $('#myselect');
$('#input_2').hide();
$('#input_3').hide();
$select.change(function(){
if($(this).val() == "option1"){
if($('#input_1').is(":hidden")){
$('#input_1').show();
}
$('#input_2').hide();
$('#input_3').hide();
}
if($(this).val() == "option2"){
if($('#input_2').is(":hidden")){
$('#input_2').show();
}
$('#input_1').hide();
$('#input_3').hide();
}
if($(this).val() == "option3"){
if($('#input_3').is(":hidden")){
$('#input_3').show();
}
$('#input_1').hide();
$('#input_2').hide();
}
});
这篇关于根据下拉框选择显示表单的不同元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文