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

时间:2013-09-02 21:11:04

标签: javascript jquery html css drop-down-menu

当用户从主选择框中选择时,我试图通过选择框显示更多选项。我为选择框添加了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>

1 个答案:

答案 0 :(得分:2)

DOM Select Element具有selectedIndex属性,它指定所选选项的索引,通过使用jQuery .eq()方法,此属性并监听change事件,您可以选择目标选择元素来自jQuery基于索引的集合:

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/