Question

我请求帮助解决以下问题：

假设我们有 divs DIV1，DIV2，DIV3和DIV4。
假设我们有下拉列表菜单，其中包含选项CHOICE1，CHOICE2和CHOICE3。

我想实现下面描述的功能：

如果用户选择CHOICE1，请显示DIV1，隐藏其他人。
如果用户选择CHOICE2，则显示DIV1和DIV3，隐藏其他内容。
如果用户选择CHOICE3，则显示DIV2，DIV3和DIV4，隐藏其他人。

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

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

只是一个想法： 0.选择类似的东西......

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

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

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

2.-在更改时设置切换可见性功能：

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');
    }
}

显然，有些方面应该有所改进，但我认为你会明白这一点。

根据下拉菜单选项显示所选的div

2 个答案: