js部分: jquery.college_laboratory.js
/*
* jQuery : 二级联动插件
* @author hua
*/
$.fn.college_laboratory = function(v_college,v_laboratory){
var _self = this;
_self.html("<select id='college' name='college' style='width: 130px'></select>" +" "+
"<select id='laboratory' name='laboratory' style='width: 130px'></select>");
//分别获取2个下拉框
var sel1 = _self.find("select").eq(0);
var sel2 = _self.find("select").eq(1);
//定义2个默认
_self.data("college",["请选择", ""]);
_self.data("laboratory",["请选择", ""]);
//院系下拉框
if(_self.data("college")){
sel1.append("<option value='"+_self.data("college")[1]+"'>"+_self.data("college")[0]+"</option>");
}
//实验室下拉框
if(_self.data("laboratory")){
sel2.append("<option value='"+_self.data("laboratory")[1]+"'>"+_self.data("laboratory")[0]+"</option>");
}
$.get('./xml/college_laboratory.xml', function(data){
var arrList = [];
$(data).find('college').each(function(){
var $college = $(this);
sel1.append("<option value='"+$college.attr('value')+"'>"+$college.attr('value')+"</option>");
});
if(typeof v_college != 'undefined'){
sel1.val(v_college);
sel1.change();
}
});
//二级联动控制
var index1 = "" ;
var collegeValue = "";
var laboratoryValue = "";
sel1.change(function(){
//清空其它2个下拉框
sel2[0].options.length=0;
index1 = this.selectedIndex;
if(index1 == 0){//当选择的为 "请选择" 时
if(_self.data("laboratory")){
sel2.append("<option value='"+_self.data("laboratory")[1]+"'>"+_self.data("laboratory")[0]+"</option>");
}
} else{
collegeValue = $('#college').val();
$.get('./xml/college_laboratory.xml', function(data){
$(data).find("college[value='"+collegeValue+"'] > laboratory").each(function(){
var $laboratory = $(this);
sel2.append("<option value='"+$laboratory.attr('value')+"'>"+$laboratory.attr('value')+"</option>");
});
if(typeof v_laboratory != 'undefined'){
sel2.val(v_laboratory);
sel2.change();
}
});
}
}).change();
return _self;
};
数据部分: college_laboratory.xml
<?xml version="1.0" encoding="utf-8"?>
<university code="86" value="黄冈师范学院">
<college code="120000" value="计算机学院">
<laboratory code="120101" value="编译原理实验室"/>
<laboratory code="120102" value="操作系统实验室"/>
<laboratory code="120103" value="软件工程实验室"/>
<laboratory code="120104" value="组成原理实验室"/>
</college>
<college code="130000" value="文学院">
<laboratory code="130101" value="历史实验室"/>
<laboratory code="130102" value="政治实验室"/>
<laboratory code="130103" value="文化实验室"/>
<laboratory code="130104" value="民族实验室"/>
</college>
<college code="140000" value="政法学院">
<laboratory code="140101" value="刑法实验室"/>
<laboratory code="140102" value="宪法实验室"/>
<laboratory code="140103" value="交通法实验室"/>
<laboratory code="140104" value="人权实验室"/>
</college>
<college code="150000" value="外国语学院">
<laboratory code="150101" value="英语听力实验室"/>
<laboratory code="150102" value="法语听力实验室"/>
<laboratory code="150103" value="德语听力实验室"/>
<laboratory code="150104" value="韩语实验室"/>
</college>
<college code="160000" value="商学院">
<laboratory code="160101" value="经商管理实验室"/>
<laboratory code="160102" value="证劵实验室"/>
<laboratory code="160103" value="期货实验室"/>
<laboratory code="160104" value="债券实验室"/>
</college>
<college code="170000" value="音乐学院">
<laboratory code="170101" value="民族乐实验室"/>
<laboratory code="170102" value="流行音乐实验室"/>
<laboratory code="170103" value="男高音实验室"/>
<laboratory code="170104" value="女低音实验室"/>
</college>
<college code="180000" value="美术学院">
<laboratory code="180101" value="人体彩绘实验室"/>
<laboratory code="180102" value="动漫实验室"/>
<laboratory code="180103" value="风景实验室"/>
<laboratory code="180104" value="美学实验室"/>
</college>
<college code="190000" value="化工学院">
<laboratory code="190101" value="化工产品实验室"/>
<laboratory code="190102" value="化学实验实验室"/>
<laboratory code="190103" value="制药实验室"/>
<laboratory code="190104" value="化肥实验室"/>
</college>
<college code="200000" value="体育机学院">
<laboratory code="200101" value="乒乓球实验室"/>
<laboratory code="200102" value="篮球实验室"/>
<laboratory code="200103" value="排球实验室"/>
<laboratory code="200104" value="足球实验室"/>
</college>
</university>
html部分:
<!DOCTYPE html>
<html>
<head>
<title>jQuery 二级联动</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.college_laboratory.js"></script>
<script type="text/javascript">
$(function(){
$("#address").college_laboratory();
});
</script>
</head>
<body>
<h3>二级联动</h3>
<div id="address"></div>
</body>
</html>