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