二级联动

最新推荐文章于 2023-10-25 13:54:02 发布

sessionCh

最新推荐文章于 2023-10-25 13:54:02 发布

阅读量1.1k

点赞数

分类专栏：网页设计之div+css web开发文章标签：省市联动二级联动 js+xml+ajax

本文链接：https://blog.csdn.net/session2me/article/details/20899771

版权

网页设计之div+css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

web开发

2 篇文章 0 订阅

订阅专栏

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>

sessionCh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级联动

/** * js部分: jquery.college_laboratory.js * jQuery : 二级联动插件 * @author hua */$.fn.college_laboratory = function(v_college,v_laboratory){var _self = this; _self.html("" +" &n
复制链接

扫一扫