jquery select 二级联动

最新推荐文章于 2019-03-12 16:32:16 发布

最新推荐文章于 2019-03-12 16:32:16 发布 · 223 阅读

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍使用Jquery实现Select控件的二级联动效果的方法。通过监听第一个Select控件的改变事件来显示或隐藏第二个Select控件中的选项，实现根据第一个选择框的选择结果动态更新第二个选择框的有效选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Jquery，实现Select的二级联动：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript" language="javascript"> 
$(function(){
   $("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange); 
   $("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange); 
});
var eDropLangChange = function(){
  var selectedValue = $(this).val(); 
  $("#dropFrame").children("span").each(function(){
    $(this).children().clone().replaceAll($(this)); 
  });
  if(parseInt(selectedValue) != 0){
    $("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){ 
      $(this).wrap("<span style='display:none'></span>");
    }); 
  }
};
var eDropFrameChange = function(){
  $("#dropLang").val($(this).children("option:selected").attr("parentid")); 
}; 
</script> 
</head> 
<body> 
<div> 
<select id="dropLang"> 
<option selected="selected" value="0"><Please Select></option> 
<option value="1">Javascript</option> 
<option value="2">Java</option> 
<option value="3">C#</option> 
</select> 
<select id="dropFrame"> 
<option selected="selected" value="0"><Please Select></option> 
<option value="1" parentid="1">JQuery</option> 
<option value="2" parentid="1">Prototype</option> 
<option value="3" parentid="2">Struts</option> 
<option value="4" parentid="2">Spring</option> 
<option value="5" parentid="2">Velocity</option> 
<option value="6" parentid="2">Hibernate</option> 
<option value="7" parentid="3">ASP.NET MVC</option> 
<option value="8" parentid="3">Castle</option> 
</select> 
</div>