我使用下面的代码来显示/隐藏基于下拉选项的div。代码完美无缺，直到我开始使用iframe来调用服务器上的本地页面。
当我通过在下拉列表中选择不同的选项进行测试时，似乎会发生的事情是，当您第一次选择6个选项时，它工作正常但是当您反复测试它并刷新页面时，最后3个options显示前3个选项的内容。即。当我选择方框4时，它显示选项1的iframe。当我选择方框5时，它显示选项2的iframe。当我选择方框6时，它显示选项3的iframe。前3个选项工作正常 - 只是不是4,5和6.这似乎只发生在IE中。有任何想法吗？感谢。
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#box1').hide();
$('#box2').hide();
$('#box3').hide();
$('#box4').hide();
$('#box5').hide();
$('#box6').hide();
$("#thechoices").change(function(){
if(this.value == 'all') {
$("#boxes").children().show();
} else {
$("#" + this.value).show().siblings().hide();}
});
$("#thechoices").change();
});
</script>
<body>
<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
<option value="box4">Box 4</option>
<option value="box5">Box 5</option>
<option value="box6">Box 6</option>
</select>
<!-- the DIVs -->
<div id="boxes">
<div id="box1">1
<iframe src="iframe1.php?currency=gbp" width="300" height="200" frameborder="0"></iframe>
</div>
<div id="box2">2
<iframe src="iframe1.php?currency=us" width="300" height="200" frameborder="0"></iframe>
</div>
<div id="box3">3
<iframe src="iframe1.php?currency=euro" width="300" height="200" frameborder="0"></iframe>
</div>
<div id="box4">4
<iframe src="iframe1.php?currency=au" width="300" height="200" frameborder="0"></iframe>
</div>
<div id="box5">5
<iframe src="iframe1.php?currency=nz" width="300" height="200" frameborder="0"></iframe>
</div>
<div id="box6">6
<iframe src="iframe1.php?currency=ca" width="300" height="200" frameborder="0"></iframe>
</div>
</div>
</body>
答案 0 :(得分：0)
$(document).ready(function(){
$("#thechoices").change(function(){
$('#boxes div').hide();
$('#'+$(this).val()).show();
});
});
#boxes div
{
display:none;
}
希望这有帮助，谢谢