0

我正在使用下面的代码根据下拉选择显示/隐藏 div。在我开始使用 iframe 调用服务器上的本地页面之前，该代码运行良好。

然后，当我通过在下拉列表中选择不同的选项来测试它时，似乎会发生什么，当您第一次选择 6 个选项时它工作正常，但是当您一遍又一遍地测试它并刷新页面时，最后 3 个选项显示前 3 个选项的内容。IE。当我选择框 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>
4

1 回答 1

0

工作演示

试试这个代码

$(document).ready(function(){
    $("#thechoices").change(function(){
        $('#boxes div').hide();
        $('#'+$(this).val()).show();
    });
});

CSS

#boxes div
{
    display:none;
}

希望这有帮助，谢谢

于 2013-09-29T10:05:49.200 回答