在选择上显示/隐藏多个DIV ID

Question

我想基于所选的选项显示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>

任何人都可以帮我这个吗？

Answer 1

修复你的vals：如果你从0开始计算，那么从零开始计数。 当选择更改时，隐藏所有div，显示正确的div。

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

的jsfiddle

Answer 2

如果您正在使用jQuery，请尝试将其作为您的函数：

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

唯一的变化是我们在显示所选div之前先隐藏所有div。 你可以使用jQuery进行许多更改。

Answer 3

你需要制作你不想显示隐藏的div。 在javascript代码的开头，这样的东西会在每次调用函数时将所有div重置为不可见。 比你只显示你想要的div。

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

Answer 4

是的，如果您不使用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';
 }

除此以外：

function displayDiv(id, sel) {
    var div = $("#" + id + sel.selectedIndex);
    div.siblings().hide();
    div.show();
}

Answer 5

既然你用jQuery标记了你的问题，我会给你一个jQuery解决方案：

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

演示： http ： //jsfiddle.net/QLphn/1/

上面应该放在document.ready处理程序中或放在<body>的底部。 您将绑定更改处理程序而不是使用内联'onchange'属性。 另外，不是所有div上的内联样式属性，你可以给它们一个公共类，或者甚至把#content div { display: none; } #content div { display: none; }在样式表（如图我演示）...

请注意，您的结束</form>标记应与开始<form>标记位于同一<div>内。

Answer 6

你不必使用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>

在选择上显示/隐藏多个DIV ID

问题描述

6 个解决方案

解决方案1
1 2012-01-26 00:37:20

解决方案2
1 2012-01-26 00:37:37

解决方案3
0 2012-01-26 00:36:40

解决方案4
0 2012-01-26 00:39:33

解决方案5
0 2012-01-26 00:39:50

解决方案6
0 2012-01-26 00:43:10

在选择上显示/隐藏多个DIV ID

问题描述

6 个解决方案

解决方案1 1 2012-01-26 00:37:20

解决方案2 1 2012-01-26 00:37:37

解决方案3 0 2012-01-26 00:36:40

解决方案4 0 2012-01-26 00:39:33

解决方案5 0 2012-01-26 00:39:50

解决方案6 0 2012-01-26 00:43:10

解决方案1
1 2012-01-26 00:37:20

解决方案2
1 2012-01-26 00:37:37

解决方案3
0 2012-01-26 00:36:40

解决方案4
0 2012-01-26 00:39:33

解决方案5
0 2012-01-26 00:39:50

解决方案6
0 2012-01-26 00:43:10