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

嘿家伙任何帮助将不胜感激。我试图根据在另一个选择选项上选择的内容显示一组选择选项。我有一个名为“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/

来源

2014-04-01 Nakhul

哇，当你看到他们这总是很有趣！使用类或'：not'选择器，而不是专门列出所有这些'.show（）'和'.hide（）'调用！挑战：使* *整个*函数只有一个* .show（）和*只有一个* .hide。 –

Duplicates [here]（http://stackoverflow.com/questions/13497728/hide-show-the-selected-option-on-a-secondary-select）和[here]（http://stackoverflow.com/questions/21579532/show-hide-select-options-based-on-previous-selection-dropdown-in-jquery-or-javas），还有更多... –

缩短我做它，解决它确实

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

来源

2014-04-01 19:53:47 adeneo

Thansk家伙的提示响应adeneo我需要的是孩子1，chid 2等在页面首次加载时隐藏起来 – Nakhul

@Nakhul - 噢，我的，那是我的错，让我为你解决这个问题亲爱的先生。现在看看答案先生，这是你想要的吗？ – adeneo

非常感谢你，这正是我需要你保存我的日子 – Nakhul

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

FIDDLE

来源

2014-04-01 19:57:21 Spokey

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

回答

相关问题