hi ,
i have 1 <select name="selector of selects"><option>*4 </select>
slecet1
select2
select3
select4
is herer
and when i chose option 1 select1 should show if i chose option 4,select 4 should show and select1 should hide…
,how i do it with javascript,
i have below code for it but if i choose slect1 and then choose select2,select1 is still showing,but i wana when i choose one more select last select thst is showing ,hide.
see below code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1,#div2,#div4,#div5,#div6,#div7,#div8,#div9,#div3 {
display: none
}
</style>
<script type="text/javascript">
function showHide(elem) {
if(elem.selectedIndex != 0) {
//hide the divs
for(var i=0; i < divsO.length; i++) {
divsO[i].style.display = 'none';
}
//unhide the selected div
document.getElementById('div'+elem.value).style.display = 'block';
}
}
window.onload=function() {
//get the divs to show/hide
divsO = document.getElementById("frmMyform").getElementsByTagName('div');
}
</script>
</head>
<body>
<form action="">
<select name="selMyList" onchange="showHide(this)">
<option value="">Select an option</option>
<option value="1">Show div 1</option>
<option value="2">Show div 2</option>
<option value="3">Show div 3</option>
<option value="4">Show div 4</option>
<option value="5">Show div 5</option>
<option value="6">Show div 6</option>
<option value="7">Show div 7</option>
<option value="8">Show div 8</option>
<option value="9">Show div 9</option>
</select>
<div id="frmMyform">
<select name="" id="div1">
</select>
<select name="" id="div2"></select>
<select name="" id="div3"></select>
<select name="" id="div4"></select>
<select name="" id="div5"></select>
<select name="" id="div6"></select>
<select name="" id="div7"></select>
<select name="" id="div8"></select>
<select name="" id="div9"></select>
</div>
</form>
</body>
</html>