javascript - 根据下拉菜单选择显示选定的 div

Question

我很乐意在以下情况下寻求帮助：

假设我们有div DIV1、DIV2和。 假设我们有带有选项的下拉菜单，和。DIV3DIV4
CHOICE1CHOICE2CHOICE3

我想实现如下所述的功能：

• 如果用户选择CHOICE1，显示DIV1，隐藏其他。
• 如果用户选择CHOICE2，显示DIV1和DIV3隐藏其他。
• 如果用户选择CHOICE3、显示和DIV2，隐藏其他人。DIV3DIV4

你明白了，我相信:-) 谢谢你的帮助，查理。

Answer 1

你也可以做这样的事情。您有您的菜单项，单击该菜单项会获取单击项的索引，然后打开相应的一系列 div。这种方法的唯一技巧是 div 和菜单项列表的顺序必须相同。

$(document).ready(function() {
    $('.menu-container li').click(function(){
        var clickedIndex = $(this).index();
        $('.div-container div').css('display', 'none');
        $('.div-container div').eq(clickedIndex).css('display', 'block');
    });
});

祝你好运，

Answer 2

尝试这个：

$(document).ready(function(){
    $("#choice").change(function(){
        $("div[id^='div']").hide();                
        var val = $(this).val();
        if(val == "CHOICE1"){
           $("#div1").show();
        }
        if(val == "CHOICE2"){
           $("#div1").show();
           $("#div3").show();
        }
    })
})​

演示在这里：http: //jsfiddle.net/6Vxw5/

Answer 3

只是一个想法：0.成为您的选择，例如...

<select name="mySelect">
    <option value="0">a</option>
    <option value="1">b</option>
</select>

1.- 设置一个将选项值与 div 相关联的数组：

var myDivs = [["div1"], ["div2", "div3"]]

2.-设置切换可见性功能onchange：

jQuery('select').change(toggleDivVisibility);

3.- 定义功能：

function toggleDivVisibility() {
    jQuery('div').css('display', 'none');
    var divIds = myDivs[this.value];
    for(var d = 0, maxD = divIds.length; d++; d < maxD) {
        var divId = divIds[d];
        jQuery("#"+divId).css('display', 'block');
    }
}

显然，有些行应该改进，但我想你会明白的。