我正在尝试根据从性别选择菜单中选择的性别更改大小选择菜单。男性和女性的尺寸有效,但中性不是。但代码应该几乎完全相同。请帮助。jquery .css('display','block')无法正常工作
这是我的css,它是不同的DIVS设置为none的基本显示,因此,只要选择了特定的性别,我就可以将其更新为阻止。
#neutralSize {
display: none;
}
#menSize {
display: none;
}
#womenSize {
display: none;
}
当男性从性别下拉列表中选择时,显示正确的男性选择。当女性选择时,正确的女性选择也会出现。但是,当选择中性时,没有任何反应。
$('#costumeGender').on('change', function() {
var gender = $(this).val();
if (gender === 'male') {
$('#menSize').css('display', 'block');
$('#womenSize').css('display', 'none');
$('#neutralSize').css('display', 'none');
}
else if (gender === 'female') {
$('#womenSize').css('display', 'block');
$('#neutralSize').css('display', 'none');
$('#menSize').css('display', 'none');
}
else if (gender === 'neutral') {
$('#neutralSize').css('display', 'block');
$('#menSize').css('display', 'none');
$('#womenSize').css('display', 'none');
}
});
#neutralSize {
display: none;
}
#menSize {
display: none;
}
#womenSize {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="costumeGender">Gender:</label>
<select name="costumeGender" id="costumeGender">
<option value=""></option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="neutral">Neutral</option>
</select>
<div id="menSize">
<label for="costumeMen">Size:</label>
<select name="costumeMen" id="costumeMen">
<option value=""></option>
<option value="xsmall">Extra Small</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xlarge">X-Large</option>
<option value="xxlarge">XX-Large</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
<option value="32">32</option>
<option value="34">34</option>
<option value="36">36</option>
<option value="38">38</option>
<option value="40">40</option>
<option value="42">42</option>
<option value="5">5 Shoe</option>
<option value="5half">5 1/2 Shoe</option>
<option value="6">6 Shoe</option>
<option value="6half">6 1/2 Shoe</option>
<option value="7">7 Shoe</option>
<option value="7half">7 1/2 Shoe</option>
<option value="8">8 Shoe</option>
<option value="8half">8 1/2 Shoe</option>
<option value="9">9 Shoe</option>
<option value="9half">9 1/2 Shoe</option>
<option value="10">10 Shoe</option>
<option value="10half">10 1/2 Shoe</option>
<option value="11">11 Shoe</option>
<option value="11half">11 1/2 Shoe</option>
<option value="12">12 Shoe</option>
</select>
</div>
<div id="womenSize">
<label for="costumeWomen">Size:</label>
<select name="costumeWomen" id="costumeWomen">
<option value=""></option>
<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="xsmall">Extra Small</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xlarge">X-Large</option>
<option value="xxlarge">XX-Large</option>
<option value="5">5 Shoe</option>
<option value="5half">5 1/2 Shoe</option>
<option value="6">6 Shoe</option>
<option value="6half">6 1/2 Shoe</option>
<option value="7">7 Shoe</option>
<option value="7half">7 1/2 Shoe</option>
<option value="8">8 Shoe</option>
<option value="8half">8 1/2 Shoe</option>
<option value="9">9 Shoe</option>
<option value="9half">9 1/2 Shoe</option>
<option value="10">10 Shoe</option>
<option value="10half">10 1/2 Shoe</option>
<option value="11">11 Shoe</option>
<option value="11half">11 1/2 Shoe</option>
<option value="12">12 Shoe</option>
</select>
<div id="neutralSize">
<label for="costumeNeutral">Size:</label>
<select name="costumeNeutral" id="costumeNeutral">
<option value=""></option>
<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="xsmall">Extra Small</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xlarge">X-Large</option>
<option value="xxlarge">XX-Large</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
<option value="32">32</option>
<option value="34">34</option>
<option value="36">36</option>
<option value="38">38</option>
<option value="40">40</option>
<option value="42">42</option>
<option value="5">5 Shoe</option>
<option value="5half">5 1/2 Shoe</option>
<option value="6">6 Shoe</option>
<option value="6half">6 1/2 Shoe</option>
<option value="7">7 Shoe</option>
<option value="7half">7 1/2 Shoe</option>
<option value="8">8 Shoe</option>
<option value="8half">8 1/2 Shoe</option>
<option value="9">9 Shoe</option>
<option value="9half">9 1/2 Shoe</option>
<option value="10">10 Shoe</option>
<option value="10half">10 1/2 Shoe</option>
<option value="11">11 Shoe</option>
<option value="11half">11 1/2 Shoe</option>
<option value="12">12 Shoe</option>
</select>
</div>