当用户从主选择框中选择时,我试图通过选择框显示更多选项。我已经将 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>
最佳答案
DOM Select Element 有 selectedIndex
属性指定被选中的 Option 的索引,通过使用 jQuery .eq()
方法,这个属性和监听 改变
事件,您可以从 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();
});
关于javascript - 选择框根据选择的内容显示另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18580804/