Как использовать 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-классы, и значения, назначенные трем вариантам выбора, потому что я пытался добиться эффекта несколькими различными способами, но пока безуспешно.

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