jquery show dropdown from dropdown

我正在使用一個很好的腳本，可以讓我從'顏色'下拉列表中進行選擇。當我選擇第一個選項時，我在其中放置了另一個「數字」下拉菜單。但現在的問題是：當我在這個'數字'下拉列表中選擇一些東西時，selectmenu消失。我希望它留下來，並提供自己的超鏈接。我的代碼：jquery show dropdown from 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>

來源

2016-09-12 Jan de Vries

當任select改變你是射擊這個$("select").change(function(){事件。做以下修改：

<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(){

這樣，它只會當顏色select沒有多少改變select ...火

如果你火它的數量select的if聲明的這一部分將被執行：

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

這將隱藏所有框。

工作實例：

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

來源

2016-09-12 17:30:36 brso05

感謝，工程巨大。 –

@JandeVries歡迎您！ – brso05

jquery show dropdown from dropdown

回答

相關問題