jQuery select/.change（）を使用して非表示のdivを表示する方法

Question

私は以下の選択フィールドがあり、クラス.show-x-trendまたはshow-xが選択されているかどうかに基づいて条件付きで別のdivを表示したいと考えています。 .show-x-trend<option>が選択されている場合は、すでに隠した#x-axis-trend-wrap<div>のオプションを選択してください。#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

を使用しています。この

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

のようなものを試してみてください。

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

これはあなたが選択したオプションが必要なクラスが含まれているかどうかを決定し、それに応じて行動するhasClassメソッドを使用することができます.hasClass()