Javascript 基于选择选项隐藏和显示选择选项

嘿，伙计们，任何帮助都将不胜感激。我试图根据在另一个选择选项上选择的内容显示一组选择选项。我有一个名为“children”的选择选项，还有一组默认情况下应该隐藏的其他选择选项。如果选择了“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>

}))

---

链接到JSFIDLE

越短越好

$('#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'）。更改（函数（）{
var val=此.val值，
sel=$（'.form-control'）。而不是（':first'）；
sel.each（函数（）{
$（this）.add（$（this）.prev（））.toggle（sel.index（this）

---

哇，当你看到它们时，它们总是很有趣！使用类或

：而不是
选择器，而不是专门列出所有这些
.show（）
和
.hide（）
调用！挑战：使整个函数只有一个.show（）和一个.hide。重复，还有更多的…比sk人来提示响应adeneo我需要的是在加载页面时隐藏子1、chid 2等first@Nakhul-哦，天哪，那是我的错，让我来帮你解决吧，亲爱的先生。现在看看答案，先生，这是你想要的吗？非常感谢，这正是我需要的，你救了我的命day@Nakhul-随时接受答案！
$('#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();
});