级联使用jquery隐藏/显示select的option

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_34417635

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量391

点赞数

文章标签： javascript xhtml ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jquery</title> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> 

<script type="text/javascript" language="javascript"> 
$(function(){ 
//Bind the change event 
$("#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">&lt;Please Select&gt;</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">&lt;Please Select&gt;</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> 
</body> </html>