选择框根据所选内容显示另一个

Question

I am trying to show more options via selectbox when the user selects from the main select box. I have put display:none for the selectboxes which will show only when the user selects option from the main select box.

can someone help me with the either jquery or javascript only for the first option ?

 .sub{display:none;}

 <select> <!--This is main selectbox.-->
 <option value="">Select</option>
 <option>ONE</option>
 <option>two</option>
 <option>three</option>
 <option>four</option>
 <option>five</option>
 </select>


 <select class="sub"><!--another selectbox for option one.-->
 <option>test1</option>
 <option>test1</option>
 </select>

 <select class="sub"><!--another selectbox for option two.-->
 <option>test2</option>
 <option>test2</option>
 </select>


 <select class="sub"><!--another selectbox for option three.-->
 <option>test3</option>
 <option>test3</option>
 </select>


 <select class="sub"><!--another selectbox for option four.-->
 <option>test4</option>
 <option>test4</option>
 </select>


 <select class="sub"><!--another selectbox for option five.-->
 <option>test5</option>
 <option>test5</option>
 </select>

Answer 1

DOM Select Element has selectedIndex property which specifies the index of the selected Option, by using jQuery .eq() method, this property and listening to change event you can select the target select element from jQuery index-based collection:

var $sub = $('select.sub');

$('select').first().change(function() {    
    $sub.hide();
    // If the first option is not selected
    if (this.selectedIndex > 0)
       $sub.eq(this.selectedIndex - 1).show();
});

http://jsfiddle.net/7CmYj/