Question

嘿伙计们，任何帮助将不胜感激。我试图根据在另一个选择选项上选择的内容显示一组选择选项。我有一个名为＆＃34; children＆＃34;使用一组其他选择选项，默认情况下应该隐藏。如果＆＃34; 1＆＃34;选择子项然后选择其中一个选项应显示，如果＆＃34; 2＆＃34;选择子项后，应显示另外两个选项。我一直试图让这个工作几天没有运气。有人能指出我正确的方向，谢谢。

这是我的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');

FIDDLE

Answer 2

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

FIDDLE

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

2 个答案: