Javascript 选择时显示/隐藏多个DIV id

我希望div根据所选的选项显示

这就是我正在尝试的，但是当我选择一个新选项时，我想替换那里的div，当我选择新选项时，这会一个接一个地显示它们

<div id="body" style="width:300px;">
<div>
<form name="frmOptions">
<select id="cboOptions" onChange="displayDiv('div',this)">
<option value="1">Option0</option>
<option value="2">Option1</option>
<option value="3">Option2</option>
<option value="4">Option3</option>
</select>
</div>

<div id="content" style="float:right;">

    <div id="div0" style="display:none;">Test 0</div>
    <div id="div1" style="display:none;">Test 1</div>
    <div id="div2" style="display:none;">Test 2</div>
    <div id="div3" style="display:none;">Test 3</div>

</div>

</form>

我正在使用的脚本

<script type="text/javascript">
     function displayDiv(id,sel){
     var div = document.getElementById(id+sel.selectedIndex);
     if (div) div.style.display = 'block';
     }
</script>

---

有人能帮我吗

您需要将不想显示的div设置为不可见。javascript代码开头的类似内容将在每次调用函数时将所有div重置为不可见。然后只显示所需的div

$("#content").find("div").each(function (index) {
    $(this).attr('display', 'none');
});

---

修正你的VAL：如果你是从0开始计算，那么从0开始计算。 当选择更改时，隐藏所有div，显示右侧div

$('select').change(function(){
    $('#content div').hide();
    $('#div' + $(this).val() ).show();
});

---

如果您使用的是jQuery，请尝试以下功能：

function displayDiv(id, sel) {
    $('#content div').hide();
    var div = document.getElementById(id + sel.selectedIndex);
    if (div) div.style.display = 'block';
}

---

唯一的变化是，我们先隐藏所有div，然后再显示所选div。要使用jQuery，您还可以做很多更改。

是的，如果您不使用jQuery，请执行以下操作：

function displayDiv(id, sel) {
    var parent = document.getElementById("content");
    console.log(parent.childNodes);

    for (var childIndex = 0; childIndex < parent.childNodes.length; childIndex++) {
        if (parent.childNodes[childIndex].style)
            parent.childNodes[childIndex].style.display = "none";
    }

 var div = document.getElementById(id+sel.selectedIndex);
 if (div) div.style.display = 'block';
 }

---

既然您已经用jQuery标记了您的问题，我将为您提供一个jQuery解决方案：

$("#cboOptions").change(function(){
    $("#content div").hide();                // hide all the divs
    $("#div" + (+$(this).val()- 1)).show();  // show the appropriate one
});

演示：

上面的内容应该放在document.ready处理程序中或文件的底部。您应该将更改处理程序绑定到那里，而不是使用内联的“onchange”属性。此外，您可以为所有div提供一个公共类，甚至可以将content div{display:none；}放入样式表中，而不是在所有div上使用内联样式属性，如我的演示中所示

---

请注意，结束标记应该与开始标记位于同一个标记内。

您不必使用jquery，但它更简单

    var currentDIV;
    <script type="text/javascript">
     function displayDiv(id,sel){
     var div = document.getElementById(id+sel.selectedIndex);
     if (div) 
      {
        div.style.display = 'block';
        if(currentDIV) currentDIV.style.display = 'none';
        currnetDIV = div;
      }     
    }
   </script>

---

您使用jQuery是因为您的示例不是。他将其标记为jQuery，所以我可以在jQuery中自由回答；好的，这就是我需要的。tyvm既然您正在使用jQuery，为什么不使用.show？或$content div.hide；^不知道您可以选择这种方式，这是一个更简单的解决方案：

    var currentDIV;
    <script type="text/javascript">
     function displayDiv(id,sel){
     var div = document.getElementById(id+sel.selectedIndex);
     if (div) 
      {
        div.style.display = 'block';
        if(currentDIV) currentDIV.style.display = 'none';
        currnetDIV = div;
      }     
    }
   </script>