jquery .css（＆＃39;显示＆＃39;，＆＃39;阻止＆＃39;）无法正常工作

Question

我正在尝试根据从性别选择菜单中选择的性别更改尺寸选择菜单。男性和女性的尺寸都有效，但中性不是。但代码应该几乎完全相同。请帮助。

这是我的css，它只是设置为none的不同DIVS的基本显示，因此无论何时选择特定的性别，我都可以将其更新为阻止。

#neutralSize {
    display: none;
}
#menSize {
    display: none;
}
#womenSize {
    display: none;
}

当从性别下拉菜单中选择男性时，会显示正确的男性选择。当选择女性时，正确的女性选择出现。但是当选择中立时，没有任何事情发生。

＆＃13;

＆＃13;

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

＆＃13;

#neutralSize {
  display: none;
}
#menSize {
  display: none;
}
#womenSize {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为你忘了关闭#womenSize div，所以你的#neutralSize div就在里面了。关闭它并且它正常工作。

＆＃13;

＆＃13;

$(document).ready(function(){
  $('#costumeGender').on('change', function () {  //changes size dropdown in search based on gender
      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');
      }
  });
});

＆＃13;

#neutralSize {
  display: none;
}
#menSize {
  display: none;
}
#womenSize {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请检查。你忘记关闭<div id="womenSize"> div。

＆＃13;

＆＃13;

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

＆＃13;

#neutralSize {
  display: none;
}
#menSize {
  display: none;
}
#womenSize {
  display: none;
}

＆＃13;

<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>
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你忘了关闭div元素 只需添加

   </div>

前

   <div id="neutralSize">

Answer 4

您也可以使用：

$('#ID').show(); //for display:block

和

$('#ID').hide(); //for display:none