linkedSelect.js
5.34 KB
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/**
* LinkedSelect: 联动下拉框控件，支持N级联动。
* 根据每个Select的定义中的url和id为Select做初始化，后台返回的数据为[{value:"",label:""},{value:"",label:""}]形式的数组json
* @author senton
* @version 1.0
*
* 以选国家、省、市的联动为例，调用示例如下：
* <pre>
* // 声明一个select变量
* var select = new LinkedSelect();
* // 调用selct的init()方法，注意，该方法的参数是一个数组，用[]括起来，每个select的定义用{}括起来，多个select定义之间以,分割
* select.init([
* {
* id:"country",
* url:"获取country列表的url",
* nullable:false,
* defaultValue:2
* },
* {
* id:"province",
* url:"获取province列表的url",
* nullable:false
* },
* {
* id:"city",
* url:"获取city列表的url",
* nullable:false
* }
* ]);
* </pre>
*/
/**
* 定义一个LinkedSelect函数
*/
function LinkedSelect(){
return this;
}
/**
* LinkedSelect的初始化方法
* @param allSelectInputs 所有的需要联动显示的下拉框，是一个数组。
* @returns
*/
LinkedSelect.prototype.init = function(allSelectInputs){
// 定义一个内部方法，用于加载一个下拉框，参数：
// allSelectInputs：所有的下拉框定义
// parentId: 上一个被选中的ID，即<option>的value属性值
// currentIndex: 要初始化的下拉框在allSelectInputs中的索引
_initNextSelect = function(allSelectInputs, parentId, currentIndex){
// 如果没有allSelectInputs值或者allSelectInputs的长度小于等于currentIndex，说明没有需要初始化的下拉框了，就返回
if(!allSelectInputs || allSelectInputs.length <= currentIndex){
return;
}
// 取出当前需要初始化的select的定义
var currentSelect = allSelectInputs[currentIndex];
// 清空currentSelect的option
//$("#"+currentSelect.id).empty();
// 如果还有下一个，则为当前的Select加上onchange事件
if(allSelectInputs.length > currentIndex+1){
$("#"+currentSelect.id).unbind("change");
$("#"+currentSelect.id).change(function(){
$("#"+currentSelect.id).selectpicker('val',$("#"+currentSelect.id).val());
_initNextSelect(allSelectInputs, jQuery(this).val(), currentIndex+1);
if(currentSelect.onchange){
currentSelect.onchange(this);
}
});
}
else {
$("#"+currentSelect.id).unbind("change");
$("#"+currentSelect.id).change(function(){
$("#"+currentSelect.id).selectpicker('val',$("#"+currentSelect.id).val());
if(currentSelect.onchange){
currentSelect.onchange(this);
}
});
}
// 如果不是第一个，则需要判断parentId是否为空，如果为空，则递归清空后面的所有下拉框
if(currentIndex != 0){
if(!parentId || parentId == ''){
jQuery("#"+currentSelect.id).append("<option value=''></option>");
_initNextSelect(allSelectInputs, jQuery("#"+currentSelect.id).val(), currentIndex + 1);
return;
}
}
//是否异步加载,默认true
var async = currentSelect.async==undefined?true:currentSelect.async;
// 如果不为空，则根据parentId取出所有的SelectItem初始化currentSelect
$.ajax({url:currentSelect.url,
data:{
parentId:parentId
},
async:async,
beforeSend: function (xhr) {
//设置请求头
//xhr.setRequestHeader("User-Agent", "headertest");
//console.log(JSON.stringify(sysComm)
xhr.setRequestHeader("x-auth-token", fn.getToken());
},
success: function(data){
if(data != null && data !="" && data !=undefined){
jQuery("#"+currentSelect.id).empty();
// 如果currentSelect在被定义时nullable为true，则说明可以为空，在第一个加上一个空的option
if(currentSelect.nullable){
jQuery("#"+currentSelect.id).append("<option value=''></option>");
}
// 取出所有的selectItem加到currentSelect上
jQuery.each(data, function (index, selectItem) {
// 如果currentSelect在被定义时的defaultValue等于当前selectItem的值，则选中它
if(selectItem.value == currentSelect.defaultValue){
if(selectItem.userDefined !== null){//weizy 添加对新添属性的控制
jQuery("#"+currentSelect.id).append("<option selected='selected' value='"
+ selectItem.value + "'" + selectItem.userDefined + ">" + selectItem.label + "</option>");
}else{
jQuery("#"+currentSelect.id).append("<option selected='selected' value='"
+ selectItem.value + "'>" + selectItem.label + "</option>");
}
}else {
if(selectItem.userDefined !== null){
jQuery("#"+currentSelect.id).append("<option value='" + selectItem.value + "'"
+ selectItem.userDefined + ">" + selectItem.label + "</option>");
}else{
jQuery("#"+currentSelect.id).append("<option value='" + selectItem.value + "'>" + selectItem.label + "</option>");
}
}
});
$("#"+currentSelect.id).selectpicker('refresh');
// 初始化完毕后，取出当前currentSelect选中的值，作为parentId初始化下一个select
_initNextSelect(allSelectInputs, jQuery("#"+currentSelect.id).val(), currentIndex+1);
}else{
console.log("下拉框加载失败")
}
}
});
};
// 调用_initNextSelect，启动第一个下拉框的加载
_initNextSelect(allSelectInputs, "", 0);
};