选择框根据所选内容显示另一个
select box show another based on what selected
当用户从主选择框中进行选择时,我正试图通过选择框显示更多选项。我为选择框设置了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()
方法,该属性和侦听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();
});
http://jsfiddle.net/7CmYj/
相关文章:
- bootstrap消除模态并显示另一个模态
- 如果显示另一个折叠的图元,如何隐藏该图元
- Javascript:当这个单词被点击5次时,下面会显示另一个单词
- 如何使用引导程序显示另一个导航栏而不是下拉菜单
- 通过点击隐藏DIV,并通过JavaScript显示另一个DIV
- 如何使一个按钮在单击时显示另一个按钮
- 角度 ui-select 绑定到一个属性,但向用户显示另一个属性
- 基础 4 - 图像滚动以显示另一个图像
- 一个 iframe 上的按钮以显示另一个 iframe
- 在当前选项卡中按下按钮时显示另一个选项卡
- 如果背景图像不存在,则在角度中显示另一个背景
- 在加载备用图像时显示另一个图像
- 使用 Jquery 显示另一个 Div 中的动态 Div 数
- 如何隐藏一个锚标记并在同一位置显示另一个锚标记
- 显示一个图像,然后使用 HTML 显示另一个图像
- 如何隐藏和显示另一个选择选项栏的选择选项
- 验证表单,然后使用 jQuery 显示另一个隐藏表单
- Vaadin 日历:如何在事件单元格上显示另一个属性
- 如何确保提交表单时未显示另一个(新)页面
- 选择框根据所选内容显示另一个