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

回答

相关问题