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

当用户从主选择框中选择时，我试图通过选择框显示更多选项。我为选择框设置了

display:none

，只有当用户从主选择框中选择选项时才会显示

有人能帮我处理第一个选项的jquery或javascript吗

 .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>

.sub{display:none；}
挑选
一个
二
三
四
五
测试1
测试1
测试2
测试2
测试3
测试3
测试4
测试4
测试5
测试5

DOM Select元素具有

selectedIndex

属性，该属性指定所选选项的索引，通过使用jQuery

.eq（）

方法，使用此属性并侦听

change

事件，您可以从基于jQuery索引的集合中选择目标Select元素：

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();
});

---

谢谢你，真是太好了。如果我想在第二个selectobox上选择的内容的基础上，通过更改类来创建第三个selectbox，我可以做同样的事情吗？@amdvb不客气，是的，如果你知道你在做什么，一切有意义的事情都是可能的。