ドロップダウン選択時にDIVを切り替えます

Question

私はSELECTドロップダウンを持っています。そして、OPTIONSを循環すると、対応するDIVが表示/非表示になります。

私が問題を抱えている部分は、コードをページ上の次の項目に適用し、ページ全体にグローバルに適用しないことです。

$(document).ready(function() { 
 
    $('#toggle-divs').on('change', function() { 
 
    $(this).next(".div1").toggle(this.value == 2) 
 
\t $(this).next(".div2").toggle(this.value == 3) 
 
\t $(this).next(".div3").toggle(this.value == 4) 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="aside"> 
 
    <select id="toggle-divs"> 
 
    <option selected="selected" value="1">Select item...</option> 
 
    <option value="2">Item 1</option> 
 
    <option value="3">Item 2</option> 
 
    <option value="4">Item 3</option> 
 
    </select> 
 
</div> 
 
<div class="aside"> 
 
    <div class="div1" style="display:none;"> 
 
    DIV 1 
 
    </div> 
 
    <div class="div2" style="display:none;"> 
 
    DIV 2 
 
    </div> 
 
    <div class="div3" style="display:none;"> 
 
    DIV 3 
 
    </div> 
 
</div>

Answer 1

私は、あなたが探しているこの何だと思います。

私はhtmlとjqueryにいくつかの変更を加えました。

htmlで「アイテムの選択...」オプションから値を削除しましたが、そのアイテムを選択すると値を送信したくありません。それから、他のものから1を引いた。

変更後、すべてのdivと次の行が隠れているので、ドロップダウンで選択したものだけを表示しています。

EDIT私はちょうどあなたが多分それを一意にするために第二のdivにIDを割り当てる方が良いでしょう、「脇」2つのdivクラスを持っていることに気づい

。 "aside_content"というIDを追加し、jqueryを適切に変更しました。

EDIT 2

を考慮にページ上のこのスニペットの複数のインスタンスを取るためにjqueryのを修正しました。私はクラスを脇にドロップダウンの親を使用していますし、クラスとの次のdivを取得し、そのdivで前と同じロジックを実行しています。

$(document).ready(function() { 
 
    $('.toggle-divs').on('change', function() { 
 
    var nextAside = $(this).parent('.aside').next('.aside'); 
 
    nextAside.find("div").hide(); 
 
    nextAside.find(".div" + this.value).show() 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="aside"> 
 
    <select class="toggle-divs"> 
 
    <option selected="selected" value="">Select item...</option> 
 
    <option value="1">Item 1</option> 
 
    <option value="2">Item 2</option> 
 
    <option value="3">Item 3</option> 
 
    </select> 
 
</div> 
 
<div class="aside"> 
 
    <div class="div1" style="display:none;"> 
 
    DIV 1 
 
    </div> 
 
    <div class="div2" style="display:none;"> 
 
    DIV 2 
 
    </div> 
 
    <div class="div3" style="display:none;"> 
 
    DIV 3 
 
    </div> 
 
</div> 
 
<!-- Second Instace --> 
 
<div class="aside"> 
 
    <select class="toggle-divs"> 
 
    <option selected="selected" value="">Select item...</option> 
 
    <option value="1">Item 1</option> 
 
    <option value="2">Item 2</option> 
 
    <option value="3">Item 3</option> 
 
    </select> 
 
</div> 
 
<div class="aside"> 
 
    <div class="div1" style="display:none;"> 
 
    DIV 1 
 
    </div> 
 
    <div class="div2" style="display:none;"> 
 
    DIV 2 
 
    </div> 
 
    <div class="div3" style="display:none;"> 
 
    DIV 3 
 
    </div> 
 
</div>

Answer 2

選択した値を保存し、すべての要素を非表示にする避けるために、私はお勧め：

$(function() { 
 
    $('#toggle-divs').on('change', function() { 
 
    // toogle on only selected one 
 
    $(".aside .div" + (+this.value - 1)).toggle(true); 
 
    
 
    // toggle off only the unseleted and visible 
 
    $(".aside > div:not('.div" + (+this.value - 1) + "'):visible").toggle(false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="aside"> 
 
    <select id="toggle-divs"> 
 
     <option selected="selected" value="1">Select item...</option> 
 
     <option value="2">Item 1</option> 
 
     <option value="3">Item 2</option> 
 
     <option value="4">Item 3</option> 
 
    </select> 
 
</div> 
 
<div class="aside"> 
 
    <div class="div1" style="display:none;"> 
 
     DIV 1 
 
    </div> 
 
    <div class="div2" style="display:none;"> 
 
     DIV 2 
 
    </div> 
 
    <div class="div3" style="display:none;"> 
 
     DIV 3 
 
    </div> 
 
</div>