Andere Container anzeigen, indem Sie auf Felder klicken

Question

Ich habe ein einfaches Auswahl-Dropdown-Menü.

<select onchange="showDiv(this)"> 
     <option value="1">Container 01</option> 
     <option value="2">Container 01 + 02</option> 
     <option value="3">Container 01 + 02 + 03</option> 
</select> 

Ich habe drei Container. Wenn ich im Auswahlbereich auf "Container 01 + 02" klicke, sollten Container 1 und 2 erscheinen. Wenn ich auf "Container 01" klicke, erscheint nur der Container 01.

<div id="container_01></div> 
    <div id="container_02></div> 
    <div id="container_03></div> 

Ich habe einen Weg gefunden, diese mit JQuery zu tun:

function showDiv(select){ 
    if(select.value==1){ 
    document.getElementById('container_01').style.display = "block"; 
    } 
    else if (select.value==2){ 
    document.getElementById('container_01').style.display = "block"; 
    document.getElementById('container_02').style.display = "block"; 
    } 
    else if(select.value==3){ 
    document.getElementById('container_01').style.display = "block"; 
    document.getElementById('container_02').style.display = "block"; 
    document.getElementById('container_03').style.display = "block"; 
    } 

Dies funktioniert gut für mich!

Jetzt mein Problem:

Um die Auswahlfelder attraktiver zu machen, verwende ich ein nettes Skript, um die Auswahl zu aufzumöbeln. Hier ein Beispiel: https://tympanus.net/Development/SelectInspiration/index3.html

Die Sache ist, das Skript wandelt das ausgewählte Dropdown-Menü auf ein Listenelement:

<ul> 
    <li class="" data-value="1"> <span>1</span> </li> 
    <li class="cs-selected" data-value="2"> <span>2</span> </li> 
    <li class="" data-value="3"> <span>3</span> </li> 
</ul> 

Ist es möglich, den Effekt wieder aufgebaut, ich habe für das Auswahlmenü erstellt? Holen Sie sich den Daten-Wert von li.cs gewählten und Anzeige:

<div id="container_01></div> 
<div id="container_02></div> 

Im nicht ziemlich gut Javascript. Vielleicht kann mir jemand helfen, dieses Problem zu lösen? Vielen Dank!

Answer 1

Ihr Ziel ist es, die Klasse der Listenelement ausgewählt zu bekommen, für das diese verwenden:

var elementSelected = document.getElementByClassName('your_class_name'); 

Auf einen Verweis in elementSelected Speicherung als ein Ereignis-Listener gelten:

elementSelected.onClick = function(){ //Code goes here } 

oder Sie könnten verwenden addEventListener Verfahren das gleiche zu tun:

elementSelected.addEventListener("click", function(e) { 
    alert('something'); 
}, false); 

O nce das Element geklickt wird Sie seinen Wert durch die Verwendung erhalten können

var elementValue = elementSelected.value

Dann können Sie diesen Wert in die „Select-Option“ übertragen Dropdown-Menü Sie erstellt haben.

Answer 2

Ich bin nicht sicher, ob Sie jQuery verwenden oder verwenden können, aber Sie können dieses Skript verwenden, um diese Werte zu erhalten, ohne dass Sie auswählen müssen.

// I would add a classname or an id to differentiate from other ul tags. 
$('ul.myMenuSelect').on('click', 'li', function(){ 
    var value = $(this).data('value'); 
    $(this).addClass('cs-selected').siblings().removeClass('cs-selected'); 
    $('#container_' + value).show().siblings().hide(); 
}) 

Answer 3

$("li.cs-selected").attr("data-value")