jquery show dropdown von dropdown

Ich benutze ein nettes Skript, das mich aus einem "Farben" -Dropdown wählen lässt. Wenn ich die erste Option auswähle, platziere ich ein weiteres "Zahlen" -Dropdown. Aber jetzt das Problem: wenn ich etwas in diesem "Nummern" -Dropdown wähle, verschwindet das Auswahlmenü. Ich möchte, dass es bleibt und eigene Hyperlinks gibt. Mein Code:jquery show dropdown von dropdown

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Select Box</title> 

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> </script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("select").change(function(){ 
    $(this).find("option:selected").each(function(){ 
     if($(this).attr("value")=="red"){ 
      $(".box").not(".red").hide(); 
      $(".red").show(); 
     } 
     else if($(this).attr("value")=="green"){ 
      $(".box").not(".green").hide(); 
      $(".green").show(); 
     } 
     else if($(this).attr("value")=="blue"){ 
      $(".box").not(".blue").hide(); 
      $(".blue").show(); 
     } 
     else{ 
      $(".box").hide(); 
     } 
    }); 
}).change(); 
}); 
</script> 
</head> 
<body> 
<div> 
    <select> 
     <option>Choose Color</option> 
     <option value="red">Red</option> 
     <option value="green">Green</option> 
     <option value="blue">Blue</option> 
    </select> 
</div> 
<div class="red box" style="margin-top:10px;"><select> 
     <option>Choose number</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select></div> 
<div class="green box">You have selected <strong>green option</strong> so i am here</div> 
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div> 
</body> 
</html>

Quelle

2016-09-12 Jan de Vries

Sie feuern diese $("select").change(function(){ Ereignis, wenn entweder select geändert wird. Nehmen Sie folgende Änderungen:

<select id="colorSelect"> 
    <option>Choose Color</option> 
    <option value="red">Red</option> 
    <option value="green">Green</option> 
    <option value="blue">Blue</option> 
</select> 

$("#colorSelect").change(function(){

Auf diese Weise wird es nur Feuer, wenn die Farbe select nicht die Nummer select geändert wird ...

Wenn Sie es auf die Anzahl select dieser Teil der if Anweisung Feuer ausgeführt werden:

else { 
    $(".box").hide(); 
}

, die alle Boxen ausblenden werden.

Arbeitsbeispiel:

$(document).ready(function(){ 
 
$("#colorSelect").change(function(){ 
 
    $(this).find("option:selected").each(function(){ 
 
     if($(this).attr("value")=="red"){ 
 
      $(".box").not(".red").hide(); 
 
      $(".red").show(); 
 
     } 
 
     else if($(this).attr("value")=="green"){ 
 
      $(".box").not(".green").hide(); 
 
      $(".green").show(); 
 
     } 
 
     else if($(this).attr("value")=="blue"){ 
 
      $(".box").not(".blue").hide(); 
 
      $(".blue").show(); 
 
     } 
 
     else{ 
 
      $(".box").hide(); 
 
     } 
 
    }); 
 
}).change(); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Select Box</title> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> </script> 
 
</head> 
 
<body> 
 
<div> 
 
    <select id="colorSelect"> 
 
     <option>Choose Color</option> 
 
     <option value="red">Red</option> 
 
     <option value="green">Green</option> 
 
     <option value="blue">Blue</option> 
 
    </select> 
 
</div> 
 
<div class="red box" style="margin-top:10px;"><select> 
 
     <option>Choose number</option> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
    </select></div> 
 
<div class="green box">You have selected <strong>green option</strong> so i am here</div> 
 
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div> 
 
</body> 
 
</html>

Quelle

2016-09-12 17:30:36 brso05

Dank, funktioniert super. –

@JandeVries du bist willkommen! – brso05

jquery show dropdown von dropdown

Antwort

Verwandte Themen