在选择上显示/隐藏多个DIV ID
[英]Show/Hide Multiple DIV IDs on Select
问题描述
I Would like the div to show based on the option selected. 
我想基于所选的选项显示div。
This is what I'm trying however when I select a new option I'd like to replace the div that's there and this is displaying them all one after the other as I select new options. 这就是我正在尝试的但是当我选择一个新的选项时，我想要替换那里的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>
The script I'm using. 我正在使用的脚本。
<script type="text/javascript">
function displayDiv(id,sel){
var div = document.getElementById(id+sel.selectedIndex);
if (div) div.style.display = 'block';
}
</script>
Could anyone help me with this? 任何人都可以帮我这个吗？
6 个解决方案
解决方案1
1 2012-01-26 00:37:20
Fix your vals: if you're counting from 0 then count from 0 everywhere. 修复你的vals：如果你从0开始计算，那么从零开始计数。 When the select changes, hide all the div, show the right one. 当选择更改时，隐藏所有div，显示正确的div。
$('select').change(function(){
$('#content div').hide();
$('#div' + $(this).val() ).show();
});
解决方案2
1 2012-01-26 00:37:37
If you're using jQuery, try this as your function: 如果您正在使用jQuery，请尝试将其作为您的函数：
function displayDiv(id, sel) {
$('#content div').hide();
var div = document.getElementById(id + sel.selectedIndex);
if (div) div.style.display = 'block';
}
The only change is that we hide all the divs first before displaying the chosen one. 唯一的变化是我们在显示所选div之前先隐藏所有div。 There are many change you could make to use jQuery more than this. 你可以使用jQuery进行许多更改。
解决方案3
0 2012-01-26 00:36:40
You need to make the div's that you don't want to show invisible. 你需要制作你不想显示隐藏的div。 Something like this at the beginning of your javascript code will reset all the divs to invisible each time the function is called. 在javascript代码的开头，这样的东西会在每次调用函数时将所有div重置为不可见。 Than you just display the divs you want. 比你只显示你想要的div。
$("#content").find("div").each(function (index) {
$(this).attr('display', 'none');
});
解决方案4
0 2012-01-26 00:39:33
Yep, just do this if you're not using 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';
}
Otherwise: 除此以外：
function displayDiv(id, sel) {
var div = $("#" + id + sel.selectedIndex);
div.siblings().hide();
div.show();
}
解决方案5
0 2012-01-26 00:39:50
Since you've tagged your question with jQuery I'll give you a jQuery solution: 既然你用jQuery标记了你的问题，我会给你一个jQuery解决方案：
$("#cboOptions").change(function(){
$("#content div").hide(); // hide all the divs
$("#div" + (+$(this).val()- 1)).show(); // show the appropriate one
});
Demo: http://jsfiddle.net/QLphn/1/ 演示： http ： //jsfiddle.net/QLphn/1/
The above should be placed either in a document.ready handler or at the bottom of the <body> . 上面应该放在document.ready处理程序中或放在<body>的底部。 You'd bind the change handler there rather than using an inline 'onchange' attribute. 您将绑定更改处理程序而不是使用内联'onchange'属性。 Also, rather than an inline style attribute on all of the divs you could give them a common class, or even put #content div { display: none; } 另外，不是所有div上的内联样式属性，你可以给它们一个公共类，或者甚至把#content div { display: none; } #content div { display: none; } in your stylesheet (as shown in my demo)... #content div { display: none; }在样式表（如图我演示）...
Note that your closing </form> tag should be inside the same <div> as the opening <form> tag. 请注意，您的结束</form>标记应与开始<form>标记位于同一<div>内。
解决方案6
0 2012-01-26 00:43:10
You don't HAVE to use jquery, but it is easier 你不必使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.