HTML部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head lang=``"en"``>
<meta charset=``"UTF-8"``>
<title>多级联动封装</title>
<link href=``"./css/bootstrap.css" rel=``"stylesheet"``>
<script src=``"./js/jquery.js"``></script>
<script src=``"./duoji.js"``></script>
</head>
<body>
<div class=``"row" style=``"margin:100px auto;"``>
<div class=``"col-md-12" id=``"box1"``></div>
</div>
<div class=``"row" style=``"margin:100px auto;"``>
<div class=``"col-md-12" id=``"box2"``></div>
</div>
<script>
//容器名,name名（新生成的class名）
$.select(``'box1'``,``'area1'``);
$.select(``'box2'``,``'area2'``);
</script>
</body>
</html>
duoji.js 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
(``function ($) {
$.select=``function``(box,addInputClass){
var i=``new select;
return i.init(box,addInputClass)
}
//声明多级联动 方法类
var select = new Function();
select.prototype={
//定义类属性
init:``function``(box,addInputClass){
this``.boxName=box;
this``.box=$(``'#'``+box); //需要添加元素的容器
this``.eleClass=addInputClass;``//每个事件的定位class
this``.first();``//新建一个select获取
},
first:``function``(){
//声明外部变量
var boxName=``this``.boxName;
var eleClass= this``.eleClass;
var box=``this``.box;
var obj=``this``;
$.get(``"[http://127.0.0.1:83/areas](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2F127.0.0.1%3A83%2Fareas)"``, {id:``'0'``},
function``(data){
var option=``"<option value=''>请选择</option>"``;
var list=data.data;
for``(``var key in list){
option+=``"<option value='"``+key+``"'>"``+list[key].areaname+``"</option>"``;
}
$(``'<div class="col-md-2 pl0"><select name="'``+eleClass+``'[]" num="0" pnode="'``+boxName+``'" cname="'``+eleClass+``'" class="form-control input-sm '``+eleClass+``'">'``+option+``'</select></div>'``).appendTo(box).find(``'select'``).bind(``'change'``,``function``(){obj.change($(``this``))});
},``'jsonp'``);
},
//change事件
change:``function``(event){
//声明
var boxName=$(event).attr(``'pnode'``); //获取触发事件者的pnode
var className=$(event).attr(``'cname'``);``//获取触发事件者的cname
var box =$(``"#"``+boxName); //获取所有插入盒子的对象
var eleClass=$(``"."``+className); //获取所有Class所在元素组
var num=eleClass.index($(event))+1; //获取num的值
var id=$(event).val(); //获取ajax发送id的头
var obj=``this``; //代表这个方法
//清除 后续添加的新的元素
eleClass.each(``function``(){
//这里的this 代表eleClass 遍历时的单个对象
//console.log($(this).attr('num'));
//console.log($().attr('num'));
if``($(``this``).attr(``'num'``)>$(event).attr(``'num'``)){
$(``this``).parent().remove();
}
});
/*
console.log(boxName);
console.log(className);
console.log($(event));
console.log($(event).val());
*/
//循环ajax方法
$.ajax({
type: "get"``,
dataType:``"jsonp"``,
url: "[http://127.0.0.1:83/areas](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2F127.0.0.1%3A83%2Fareas)"``,
data: {id:id},
sync: false``,``//设置为同步
success: function``(data){
//console.log(data);
var list =data.data
if``(data.state===``'1'``){
var option=``"<option value=''>请选择</option>"``;
for``(``var key in list){
option+=``"<option value='"``+key+``"'>"``+list[key].areaname+``"</option>"``;
}
$(``'<div class="col-md-2 pl0"><select name="'``+className+``'[]" num="'``+num+``'" pnode="'``+boxName+``'" cname="'``+className+``'" class="form-control input-sm '``+className+``'" >'``+option+``'</select></div>'``).appendTo(box).find(``'select'``).bind(``'change'``,``function``(){obj.change(``this``)});
}
}
});
},
//查询当前盒子中的信息
log:``function``(){
var boxName=$(event).attr(``'pnode'``); //获取触发事件者的pnode
var className=$(event).attr(``'cname'``);``//获取触发事件者的cname
var box =$(``"#"``+boxName); //获取所有插入盒子的对象
var eleClass=$(``"."``+className); //获取所有Class所在元素组
console.log(``"容器名:"``+boxName+``"\n 触发的class名:"``+className);
},
//第一个select框获取信息
getFirstElement:``function``(){
var main=$(``'#'``+``this``.main);
$.get(``"[http://127.0.0.1:83/areas](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2F127.0.0.1%3A83%2Fareas)"``, {id:``'0'``},
function``(data){
var option=``"<option value=''>请选择</option>"``;
var list=data.data;
for``(``var key in list){
option+=``"<option value='"``+key+``"'>"``+list[key].areaname+``"</option>"``;
}
main.html(option);
},``'jsonp'``);
}
}
})(jQuery)
后端提供的数据类型：json
如果有数据：state=1
例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
data:{
110000:{id: "110000"``, areaname: "北京"``, pid: "0"``, shortname: "北京"``, level: "1"``, position: "tr_0"``, sort: "1"``}
120000:{id: "120000"``, areaname: "天津"``, pid: "0"``, shortname: "天津"``, level: "1"``, position: "tr_0"``, sort: "2"``}
130000:{id: "130000"``, areaname: "河北省"``, pid: "0"``, shortname: "河北"``, level: "1"``, position: "tr_0"``, sort: "3"``}
140000:{id: "140000"``, areaname: "山西省"``, pid: "0"``, shortname: "山西"``, level: "1"``, position: "tr_0"``, sort: "4"``}
150000:{id: "150000"``, areaname: "内蒙古自治区"``, pid: "0"``, shortname: "内蒙古"``, level: "1"``, position: "tr_0"``, sort: "5"``}
210000:{id: "210000"``, areaname: "辽宁省"``, pid: "0"``, shortname: "辽宁"``, level: "1"``, position: "tr_0"``, sort: "6"``}
220000:{id: "220000"``, areaname: "吉林省"``, pid: "0"``, shortname: "吉林"``, level: "1"``, position: "tr_0"``, sort: "7"``}
230000:{id: "230000"``, areaname: "黑龙江省"``, pid: "0"``, shortname: "黑龙江"``, level: "1"``, position: "tr_0"``, sort: "8"``}
310000:{id: "310000"``, areaname: "上海"``, pid: "0"``, shortname: "上海"``, level: "1"``, position: "tr_0"``, sort: "9"``}
320000:{id: "320000"``, areaname: "江苏省"``, pid: "0"``, shortname: "江苏"``, level: "1"``, position: "tr_0"``, sort: "10"``}
330000:{id: "330000"``, areaname: "浙江省"``, pid: "0"``, shortname: "浙江"``, level: "1"``, position: "tr_0"``, sort: "11"``}
.....
},
state:``"1"
如果没有数据 state=0
例子：
state:"0"
