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.
JavaScript
x
13
13
1
function CheckDep(val)2
{3
var element=document.getElementById('line')4
if(val=='others')5
element.style.display='block'6
else7
element.style.display='none';8
var element=document.getElementById('manufact')9
if (val=='machine')10
element.style.display='block'11
else12
element.style.display='none';13
}JavaScript
1
20
20
1
<body>2
<label for="color">Department:</label>3
<select name="color" onchange='CheckDep(this.value);'>4
<option></option>5
<option value="ware">Warehouse</option>6
<option value="machine">Manufacturing</option>7
<option value="others">Packaging</option>8
</select>9
10
<select type="text" name="color" id="manufact" style='display:none;'>11
<option value=""></option>12
<option value="hi">hi</option>13
</select>14
15
<select type="text" name="color" id="line" style='display:none;'>16
<option value=""></option>17
<option value="6">6</option>18
<option value="14">14</option>19
</select>20
</body>Am I missing something?
Advertisement
Answer
The style in the following select element is not correct:
JavaScript
1
2
1
<select type="text" name="color" id="manufact" style='display;none;'>2
It has to be as follow:
JavaScript
1
2
1
<select type="text" name="color" id="manufact" style='display:none;'>2
Also there is mistake in the following select element:
JavaScript
1
2
1
<select type="text" name="color" id="line" style='display:none;'/>2
It has to be as follow:
JavaScript
1
2
1
<select type="text" name="color" id="line" style='display:none;'>2
Also you need to use closing tag for that select element </select>