如何通过选择显示/隐藏的div(jQuery的)
题
我的代码:
<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>
我想是显示DIV#form1的时候选择选项1,隐藏窗口2 + form3,或 选择选项2显示DIV#窗口2和隐藏form1中+窗口2
解决方案
$('#select').change(function() {
$('#form1, #form2, #form3').hide();
$('#form' + $(this).find('option:selected').attr('id')).show();
});
请注意,ID应该不会以数字开头,但上面的应该这样做。
其他提示
如果您的形式是大的,你可以把它们放在不同的文件这样的,
$(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>
这样的?
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;
}
那岂不是更好地只隐藏以前显示的div? 所以;
var selection = 0;
$('#select').change(function() {
$('#form' + selection).hide();
selection = $(this).val();
$('#form' + selection).show();
});
请注意,ID应该不会以数字开头,但上面的应该这样做。
更好的版本:
$('#select').change(function() {
$('div').not('#form' + $(this).find('option:selected').attr('id')).hide();
$('#form' + $(this).find('option:selected').attr('id')).show();
});
不隶属于 StackOverflow