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

在以下情况下，我恳请您提供帮助：

假设我们有div

DIV1

，

DIV2

，

DIV3

和

DIV4

假设我们有下拉菜单，其中有

选项1

、

选项2

和

选项3

我希望实现以下功能：

• 如果用户选择了

  CHOICE1

  ，则显示

  DIV1

  ，隐藏其他
• 如果用户选择了

  CHOICE2

  ，则显示

  DIV1

  和

  DIV3

  ，隐藏其他
• 如果用户选择了

  CHOICE3

  ，则显示

  DIV2

  ，

  DIV3

  和

  DIV4

  ，隐藏其他

我相信你有这个主意：-）谢谢你的帮助，查理。

试试这个：

$(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();
        }
    })
})​

此处演示：

只是一个想法： 0作为你的选择，就像

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

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

函数toggleDivVisibility（）{
jQuery（'div'）.css（'display'，'none'）；
var divIds=myDivs[this.value]；
for（var d=0，maxD=divIds.length；d++；d

---

显然，有些台词需要改进，但我想你会明白的。

你也可以这样做。您有自己的菜单项，单击该菜单项时，将获取所单击项的索引，然后打开相应的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');
    });
});

---

祝您好运，

您好，经理，非常感谢您这么快回答！：-）如果我需要在下拉菜单代码-->中添加一些内容，请告诉我是否可以使用onchange调用该函数？我希望有一个完整的例子，包括html代码和css-值得一杯啤酒：-）。@Charlie如果你想使用

onchange

看看这个：它只在你的html页面上工作。我完全不懂javascript，我发现所有的例子都涵盖了1个选项->1个div场景。你使用的是jquery还是javascript？你能发布你代码的html和css部分吗？

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