选择显示/隐藏多个DIV ID

这就是我想要的，但是当我选择一个新的选项时，我想替换那里的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>

任何人都可以帮助我吗？

来源

2012-01-26 Brett J Mason

你使用jQuery，因为你的例子是不是就是。 – j08691

他被标记为jquery，所以我可以自由地在jquery中作出我的回答;） – Sinetheta

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

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

来源

2012-01-26 00:36:40

或'$（“＃content div”）。hide（）;' – nnnnnn

^不知道你可以选择那种方式，这是一个更简单的解决方案:) –

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

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

jsFiddle

来源

2012-01-26 00:37:20 Sinetheta

如果你使用jQuery，试试这个作为你的函数：

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

唯一的变化是，我们首先隐藏所有的div显示所选择的一个之前。您可以使用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(); 
}

来源

2012-01-26 00:37:37 j08691

好吧，这是我需要的。 Tyvm –

既然你使用jQuery，为什么不使用'.show（）'？ – nnnnnn

是的，如果你不使用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>标签。

来源

2012-01-26 00:39:33 SoWeLie

既然你已经使用jQuery标记你的问题，我给你一个jQuery解决方案

来源

2012-01-26 00:39:50 nnnnnn

你没有使用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>

来源

2012-01-26 00:43:10 Oliver

选择显示/隐藏多个DIV ID

回答

相关问题