複数の選択値に基づいてdiv表示を切り替えます

Question

div＃オプションの子をいくつか選択ボックスの複数の値に基づいて表示します。

HTML：関連付ける

<select id="select"> 
<option selected="selected" value="">- Select -</option> 
<option value="4">4th Option</option> 
<option value="5">5th Option</option> 
<option value="6">6th Option</option> 
<option value="7">7th Option</option> 
<option value="8">8th Option</option> 
<option value="9">9th Option</option> 
</select> 

<div id="options"> 
<div class="form-item-a">content a</div> 
<div class="form-item-b">content b</div> 
<div class="form-item-c">content c</div> 
<div class="form-item-d">content d</div> 
<div class="form-item-e">content e</div> 
<div class="form-item-f">content f</div> 
<div class="form-item-g">content g</div> 
</div> 

ない便利なクラス、私は怖いです。

Iは、値のアレイを有することが期待ながらIは、以下試みたが、単一の値のために働いた：

$('#select').change(function (e) { 
    // Strange, without pseudo :checked, no event triggered. 
    var options = $(this).find('option:checked').val(); 

    // Show .form-item-a, if values 4, 5, 6 
    $('.form-item-a').toggle($('option[value="4, 5, 6"]:selected',this).length > 0); 

    // Show .form-item-b, if values 5, 6, 7 
    $('.form-item-b').toggle($('option[value="5, 6, 7"]:selected',this).length > 0); 

    // etc. 
$('.form-item-c').toggle($('option[value="8, 9"]:selected',this).length > 0); 
}); 

ここで配列値を配置する（値=「4、5、6」）であります明らかに間違っていますが、これは私が達成しようとしていることを示しています。なぜなら、それらをjqueryの配列に入れることは考えていないからです。どのように値を配列に入れるか、引数として渡していくつかのdivの可視性を切り替えることができます。 これを達成するためのより良い方法はありますか？

どのようなヒントも、いつものように非常に高く評価されます。

おかげ

Answer 1

コードのこの作品は、最適化が必要な場合がありますが、それはあなたのアイデアを提供します。あなたは多分データを使用することができ

属性：

<select id="select"> 
    <option selected="selected" value="">- Select -</option> 
    <option value="4" data-showdiv='form-item-a'>4th Option</option> 
    <option value="5" data-showdiv='form-item-a'>5th Option</option> 
    <option value="6" data-showdiv='form-item-a'>6th Option</option> 
    <option value="7" data-showdiv='form-item-b'>7th Option</option> 
    <option value="8" data-showdiv='form-item-b'>8th Option</option> 
    <option value="9" data-showdiv='form-item-b'>9th Option</option> 
</select> 

<div id="options"> 
    <div class="form-item-a">content a</div> 
    <div class="form-item-b">content b</div> 
    <div class="form-item-c">content c</div> 
    <div class="form-item-d">content d</div> 
    <div class="form-item-e">content e</div> 
    <div class="form-item-f">content f</div> 
    <div class="form-item-g">content g</div> 
</div> 

とjQueryコード：

$('#select').change(function (e) { 
    var $this = $(this), 
     val = $this.val(), 
     toShow = $this.find('option:selected').data('showdiv'); 

    // hide all divs 
    $('#options > div').hide(); 

    // show the one 
    $('.' + toShow).show(); 

}); 

は、それが助けDを願っています。

---

オプションで複数のdivを表示する必要があるため、データ属性の解決策は表示されたとおりに機能しません。

私は、あなたは、単にあなたのケースのために、この道を行くことができると思います。

$('#select').change(function (e) { 

    // no need to get the option, val() on the select works 
    var val= $(this).val(); 

    // no need to re-select the option for the value, you just selected it 
    $('.form-item-a').toggle((val === "4" || val === "5" || val === "6")); 
    $('.form-item-b').toggle((val === "5" || val === "6" || val === "7")); 

});