How do I choose DIV based contents in a page with a dropdown list
-
I have many DIV based contents in a page with a dropdown list. Right now, it shows everything, but, I want to choose an item from the dropdown list and it show the corresponding content based on the selection. Please make a correction to the function I'm using since it's not working: function toggleDIvDisplay() { var index = document.getElementById("App").selectedIndex.value; alert(index); var x = document.getElementById("maxLenght").value; for (i = 0; i < x; i++) { if(null != document.getElementById(i)) document.getElementById(i).style.visibility='block'; } document.getElementById(index).style.visibility='visible'; }
-
I have many DIV based contents in a page with a dropdown list. Right now, it shows everything, but, I want to choose an item from the dropdown list and it show the corresponding content based on the selection. Please make a correction to the function I'm using since it's not working: function toggleDIvDisplay() { var index = document.getElementById("App").selectedIndex.value; alert(index); var x = document.getElementById("maxLenght").value; for (i = 0; i < x; i++) { if(null != document.getElementById(i)) document.getElementById(i).style.visibility='block'; } document.getElementById(index).style.visibility='visible'; }
Member 11826602 wrote:
document.getElementById(i).style.visibility='block';
There's no such values a "block" for visibility - it's a display property. Assuming you want to maintain the spacing on the page as you change views, you want to swap between visibility = 'hidden' and 'visible'. Here's some quick help: http://www.w3schools.com/cssref/pr_class_visibility.asp[^]
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"As far as we know, our computer has never had an undetected error." - Weisert
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010
-
I have many DIV based contents in a page with a dropdown list. Right now, it shows everything, but, I want to choose an item from the dropdown list and it show the corresponding content based on the selection. Please make a correction to the function I'm using since it's not working: function toggleDIvDisplay() { var index = document.getElementById("App").selectedIndex.value; alert(index); var x = document.getElementById("maxLenght").value; for (i = 0; i < x; i++) { if(null != document.getElementById(i)) document.getElementById(i).style.visibility='block'; } document.getElementById(index).style.visibility='visible'; }
-
I have many DIV based contents in a page with a dropdown list. Right now, it shows everything, but, I want to choose an item from the dropdown list and it show the corresponding content based on the selection. Please make a correction to the function I'm using since it's not working: function toggleDIvDisplay() { var index = document.getElementById("App").selectedIndex.value; alert(index); var x = document.getElementById("maxLenght").value; for (i = 0; i < x; i++) { if(null != document.getElementById(i)) document.getElementById(i).style.visibility='block'; } document.getElementById(index).style.visibility='visible'; }
jQuery Show Hide Elements Using Select Box
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});Choose Color Red Green Blue
You have selected red option so i am here
You have selected green option so i am here
You have selected blue option so i am here