根据选择选项隐藏和显示选择选项

Question

Hey guys any help will be appreciated. I'm trying to show a set of select option base on what is selected on another select option. I have a select option called "children" with a set of other select option which should be hidden by default. If "1" children is selected then one of the other select option should show, if "2" children is selected then two of the other option should be displayed. I have been trying to get this to work for a few days now with no luck. Can someone point me in the right directions thanks.

here is my 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>

here is my 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();
}

});

Link to jsfiddle http://jsfiddle.net/BMcJ9/

Answer 1

Shorter I made it, work it does

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

FIDDLE

Answer 2

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

FIDDLE