根据选择选项隐藏和显示选择选项
Hide and show select option based on select option
嘿伙计们，任何帮助将不胜感激。我正在尝试根据在另一个选择选项上选择的内容显示一组选择选项。我有一个名为"孩子"的选择选项，其中包含一组其他选择选项，默认情况下应将其隐藏。如果选择了"1"子选项，则应显示另一个选择选项之一，如果选择了"2"子选项，则应显示其他选项中的两个。几天来我一直在努力让它工作，但没有运气。有人可以指出我正确的方向吗，谢谢。
这是我的 HTML
<select name="child" class="form-control" id="numchds" onchange="updateRooms();">
<option value="child" selected="selected">Children</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="row" id="childage">
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 1</label>
<select name="0" class="form-control" id="chd1age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 2</label>
<select name="child" class="form-control" id="chd2age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 3</label>
<select name="child" class="form-control" id="chd3age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 4</label>
<select name="child" class="form-control" id="chd4age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 5</label>
<select name="child" class="form-control" id="chd5age">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
</div>
这是我的 JavaScript
$('#numchds').change(function () {
var val = $(this).val();
if (val === 'child') {
$('#chd1age').hide();
$('#chd2age').hide();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '1') {
$('#chd1age').show();
$('#chd2age').hide();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '2') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '3') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '4') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').show();
$('#chd5age').hide();
} else {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').show();
$('#chd5age').show();
}
}）;
链接到 jsfiddle http://jsfiddle.net/BMcJ9/
我做了更短，它确实有效
$('#numchds').change(function () {
var val = this.value,
sel = $('.form-control').not(':first');
sel.each(function() {
$(this).add($(this).prev()).toggle(sel.index(this) < val)
});
}).trigger('change');
小提琴
$('#numchds').change(function () {
var val = $(this).val() || 5;
$('#childage > div').show().eq(val-1).nextAll().hide();
});
小提琴
相关文章：
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时，Javascript需要在正确的位置显示文本区域，从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项，就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时，才选择选项元素
