如何使用jQuery select / .change（）來顯示隱藏的div

Question

我有以下選擇字段，並且根據是否選擇了類.show-x-trend或show-x ，我想有條件地顯示一個單獨的div。 如果選擇.show-x-trend <option> ，我想顯示已經隱藏的#x-axis-trend-wrap <div> ；如果選擇了show-x選項，我想顯示已經隱藏的#x-axis-wrap <div> 。 在下面的代碼中，您將看到我既有CSS類，又為3個選擇選項分配了值，因為我試圖通過幾種不同的方式來實現效果，但到目前為止還算不上運氣。

<div id="visualize-wrap">
    <h3>Visualization Shows</h3>
    <select id="visualize-shows" name="visualize">
        <option class="no-show" value="00">Select One</option>
        <option class="show-x-trend" value="01">Trend Over Time</option>
        <option class="show-x" value="02">Breakdown of Sum Total</option>
        <option class="show-x" value="03">Side-by-side Comparison</option>
    </select>
</div>

Answer 1

您可以使用hasClass方法來確定所選選項是否包含必需的類，並采取相應的措施。

$('#visualize-shows').change(function(){
    var $selectedOption = $(this).find('option:selected');
    $('#x-axis-trend-wrap')
    .toggle( $selectedOption.hasClass('show-x-trend'));
    $('#x-axis-wrap')
    .toggle( $selectedOption.hasClass('show-x'));
});

工作演示-http: //jsfiddle.net/X2dPt/

Answer 2

試試這個

$("#visualize-shows").change(function() {
   $selected = $(this).find('option:selected'); // get selected option
   if ($selected.hasClass('show-x-trend')) { // check the class
      $('#x-axis-trend-wrap').toggle(); // toggle display
   } else if ($selected.hasClass('show-x')) {
      $('#x-axis-wrap').toggle();
   }
});

這使用.hasClass（）