jquery .css（'display'，'block'）無法正常工作

-1

我正在嘗試根據從性別選擇菜單中選擇的性別更改大小選擇菜單。男性和女性的尺寸有效，但中性不是。但代碼應該幾乎完全相同。請幫助。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>

來源

2017-11-04 Abombthecat

你忘了關div元素之前

<div id="neutralSize">

來源

2017-11-04 05:10:45 Jozaghi

它，因爲你忘了關#womenSize格，所以你#neutralSize DIV是裏面。關閉它，它正常工作。

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

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

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

來源

2017-11-04 05:01:50

請檢查。你忘記關閉<div id="womenSize">股利。

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

來源

2017-11-04 05:02:14

添加

</div>

您還可以使用：

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

和

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

來源

2017-11-04 05:21:51

jquery .css（'display'，'block'）無法正常工作

回答

相關問題