Toggle DIV auf Drop-Down-Auswahl

Question

Ich habe eine SELECT-Dropdown und wenn Sie durch die OPTIONEN durchlaufen die entsprechenden DIV's werden angezeigt/versteckt.

Der Teil, mit dem ich ein Problem habe, ist, dass ich möchte, dass der Code auf die nächsten Elemente auf der Seite und nicht global auf die gesamte Seite angewendet wird.

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

Ich denke, das, was Sie suchen.

Ich habe einige Änderungen an der HTML und der Jquery gemacht.

In der html habe ich den Wert aus der "Select Item ..." Option entfernt, wollen Sie nicht, dass ein Wert zu senden, wenn sie das auswählen. Dann habe ich 1 von den anderen abgezogen.

Nach der Änderung, ich verstecke alle divs und die nächste Zeile, ich zeige nur die, die im Dropdown ausgewählt ist.

EDIT

Ich habe gerade bemerkt, dass Sie 2 divs mit Klasse „beiseite“, vielleicht wäre es besser, die zweite div eine ID zuweisen, um es einzigartig zu machen. Ich fügte eine ID von "side_content" hinzu und modifizierte die jquery passend.

EDIT 2

die jquery Modified berücksichtigt mehrere Instanzen dieses Snippet auf der Seite zu nehmen. Ich benutze das Elternteil des Dropdowns mit der Klasse beiseite und dann das nächste div mit Klasse zur Seite und mache die gleiche Logik wie zuvor auf diesem 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

die ausgewählten Werte zu bewahren und vermeiden Sie alle Elemente zu verbergen, schlage ich vor:

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