-1
ジェンダー選択メニューから選択された性別に基づいてサイズ選択メニューを変更しようとしています。男性と女性のサイズは機能しますが、ニュートラルはサイズではありません。しかし、コードはほぼ同じでなければなりません。助けてください。jquery .css（ 'display'、 'block'）が正しく動作しない
、これは私が特定の性別が選択されるたびにブロックするためにそれを更新できるように、noneに設定異なるDIVSだけの基本的なディスプレイである私のCSSです。
#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>