如何通过选择显示/隐藏 div。（jquery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1043267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to show/hide divs by select.(jquery)
提问by vee
my code:
我的代码：
<select id="select">
<option id="1" value="thai language">option one</option>
<option id="2" value="eng language">option two</option>
<option id="3" value="other language">option three</option>
</select>
<div id="form1">content here</div>
<div id="form2">content here</div>
<div id="form3">content here</div>
what i want is to show div #form1 when select option 1 and hide form2+form3, or select option 2 show div#form2 and hide form1+form2
我想要的是在选择选项 1 时显示 div #form1 并隐藏 form2+form3，或者选择选项 2 显示 div#form2 并隐藏 form1+form2
回答by Paolo Bergantino
$('#select').change(function() {
$('#form1, #form2, #form3').hide();
$('#form' + $(this).find('option:selected').attr('id')).show();
});
Do note that IDs should not start with numbers, but the above should do it.
请注意，ID 不应以数字开头，但应以上述方式开头。
回答by Tony Borf
If your forms are large, you can put them in separate files like this,
如果你的表格很大，你可以把它们放在这样的单独文件中，
$(document).ready(function() {
$('#select').change(function() {
$("#myform").load(this.value);
});
});
<select id="select">
<option value="blank.htm">Select A Form</option>
<option value="test1.htm">option one</option>
<option value="test2.htm">option two</option>
<option value="test3.htm">option three</option>
</select>
<div id="myform" ></div>
回答by Vladimir
Better version:
更好的版本：
$('#select').change(function() {
$('div').not('#form' + $(this).find('option:selected').attr('id')).hide();
$('#form' + $(this).find('option:selected').attr('id')).show();
});
回答by Tom
Something like this?
像这样的东西？
var optionValue = $("#select").val();
$('#form1, #form2, #form3').hide();
switch(optionValue)
{
case 1:
$("#form1").show();
break;
case 2:
$("#form2").show();
break;
case: 3:
$("#form3").show();
break;
}
回答by jcuenod
Wouldn't it be better to only hide the previously shown div? So;
只隐藏之前显示的 div 不是更好吗？所以;
var selection = 0;
$('#select').change(function() {
$('#form' + selection).hide();
selection = $(this).val();
$('#form' + selection).show();
});
Do note that IDs should not start with numbers, but the above should do it.
请注意，ID 不应以数字开头，但应以上述方式开头。
