根據選擇選項隱藏和顯示選擇選項

Question

嘿伙計們，任何幫助將不勝感激。 我正在嘗試根據在另一個選擇選項上選擇的內容顯示一組選擇選項。 我有一個名為“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>

這是我的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/

Answer 1

我做得更短，做到了

$('#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');

小提琴

Answer 2

$('#numchds').change(function () {
    var val = $(this).val() || 5;
    $('#childage > div').show().eq(val-1).nextAll().hide();
});

小提琴