CODEWITHSUNDEEP
javascriptjqueryhtml
Kyle Nakhul
Kyle Nakhul

Reputation: 13

Hide and show select option based on select option

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/

Upvotes: 0

Views: 234

Answers (2)

adeneo
adeneo

Reputation: 318182

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

Upvotes: 2

Spokey
Spokey

Reputation: 10994

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

FIDDLE

Upvotes: 0

Related Questions