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

修复你的val：如果你从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; }放在你的样式表中（如我的演示所示）......

请注意，您的结束</form>代码应与开场<div>代码位于同一<form>内。

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 个答案: