Show/Hide Multiple DIV IDs on Select
Question
I Would like the div to show based on the option selected.
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 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 answers
solution1
1 2012-01-26 00:37:20
Fix your vals: if you're counting from 0 then count from 0 everywhere. When the select changes, hide all the div, show the right one.
$('select').change(function(){
$('#content div').hide();
$('#div' + $(this).val() ).show();
});
solution2
1 2012-01-26 00:37:37
If you're using jQuery, try this as your function:
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. There are many change you could make to use jQuery more than this.
solution3
0 2012-01-26 00:36:40
You need to make the div's that you don't want to show invisible. Something like this at the beginning of your javascript code will reset all the divs to invisible each time the function is called. Than you just display the divs you want.
$("#content").find("div").each(function (index) {
$(this).attr('display', 'none');
});
solution4
0 2012-01-26 00:39:33
Yep, just do this if you're not using 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();
}
solution5
0 2012-01-26 00:39:50
Since you've tagged your question with jQuery I'll give you a jQuery solution:
$("#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/
The above should be placed either in a document.ready handler or at the bottom of the <body> . You'd bind the change handler there rather than using an inline 'onchange' attribute. 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; } #content div { display: none; } in your stylesheet (as shown in my demo)...
Note that your closing </form> tag should be inside the same <div> as the opening <form> tag.
solution6
0 2012-01-26 00:43:10
You don't HAVE to use jquery, but it is easier
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.