Show/ hide select with choosing options in separate select

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>

@TechnoBear
Thanks:kissing_heart:

1 Like

There are no divs in frmMyform, so divsO is empty. The line should go

divsO = document.getElementById("frmMyform").getElementsByTagName('select');

Besides, I’d suggest to actually declare divsO as a variable… it may not be necessary here but it’s good practice, and accessing the global object this way is actually disallowed in strict mode. Also, you don’t even need that window.onload part if you put your script code at the end of the document right before the </body> closing tag. And finally, I’d separate script and HTML by adding an event listener within the script; your code thus becomes

var showHide = function() {
    if(this.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' + this.value).style.display = 'block';
    }
};
 
//get the divs to show/hide
var divsO = document
    .getElementById("frmMyform")
    .getElementsByTagName('select');

document
    .getElementsByName('selMyList')[0]
    .addEventListener('change', showHide);

Unsolicited advice over. :~)

2 Likes

Thank you so much @m3g4p0p

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.