I have a drop down list that is supposed to open a new list when a certain option is selected, for whatever reason one of the hidden boxes appears when I reload the page but goes away when I select an option that isn’t connected to that box.
function CheckDep(val) { var element=document.getElementById('line') if(val=='others') element.style.display='block' else element.style.display='none'; var element=document.getElementById('manufact') if (val=='machine') element.style.display='block' else element.style.display='none'; }
<body> <label for="color">Department:</label> <select name="color" onchange='CheckDep(this.value);'> <option></option> <option value="ware">Warehouse</option> <option value="machine">Manufacturing</option> <option value="others">Packaging</option> </select> <select type="text" name="color" id="manufact" style='display:none;'> <option value=""></option> <option value="hi">hi</option> </select> <select type="text" name="color" id="line" style='display:none;'> <option value=""></option> <option value="6">6</option> <option value="14">14</option> </select> </body>
Am I missing something?
Advertisement
Answer
The style in the following select element is not correct:
<select type="text" name="color" id="manufact" style='display;none;'>
It has to be as follow:
<select type="text" name="color" id="manufact" style='display:none;'>
Also there is mistake in the following select element:
<select type="text" name="color" id="line" style='display:none;'/>
It has to be as follow:
<select type="text" name="color" id="line" style='display:none;'>
Also you need to use closing tag for that select element </select>