I'm working on displaying additional options in a select box when the user makes a selection from the main select box. I've set display:none for the select boxes, which will only appear when the user chooses an option from the main select box.
Could someone assist me with either jQuery or JavaScript specifically for the first choice?
.sub{display:none;}
<select><!--This is the main select box-->
<option value="">Select</option>
<option>ONE</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
<select class="sub"><!--Another select box for option one-->
<option>test1</option>
<option>test1</option>
</select>
<select class="sub"><!--Another select box for option two-->
<option>test2</option>
<option>test2</option>
</select>
<select class="sub"><!--Another select box for option three-->
<option>test3</option>
<option>test3</option>
</select>
<select class="sub"><!--Another select box for option four-->
<option>test4</option>
<option>test4</option>
</select>
<select class="sub"><!--Another select box for option five-->
<option>test5</option>
<option>test5</option>
</select>