项目中的五级地址联动效果(js)

我刚开始是的时候是是写了一个sql语句，但是写了5个函数，来联动地址的。后来请教了前端的师傅，用js来写了一个地址联动的。

我使用的是easyui的框架！

地址联动部分html代码！
<tr>
<td colspan="4">
<div id="address_box1">
省  :<input class="easyui-combobox" name="codeName" id="codeName" style="width:120px;"/>
市  :<input class="easyui-combobox" name="code_nameShi" id="code_nameShi" style="width:120px;" />
区/县:  <input class="easyui-combobox" name="code_nameQu" id="code_nameQu" style="width:120px;"/>
街道: <input class="easyui-combobox" name="code_namebut" id="code_namebut" style="width:150px;" />
社区: <input class="easyui-combobox" name="code_nameSheQu" id="code_nameSheQu" style="width:150px;"/>
<input name="addressId" id="addressId" style="display:none" ></div>
</td>
</tr>

因为我的是在添加了一条数据之后，要刷新整个页面。

var AddressBox = function () {
var self = this;
this.selectboxs = ["codeName", "code_nameShi", "code_nameQu", "code_namebut", "code_nameSheQu"];
var len = this.selectboxs.length, i, obj;
for (i = 0; i < len; ++i) {
obj = $("#" + this.selectboxs[i]);
if(i<len-1){// 这里的长度-1，是因为我要得到的最后的数据，是最后地址的id值，前面的地址我需要得到是他们的code_value。
obj.combobox({
valueField:'code_value',
textField:'name',
onChange: (function (index) {
return function (newValue, oldValue) {
if(newValue && newValue.length > 0){
self.Clear(index + 1);
self.Load(index + 1, newValue);
}
};
})(i)
});
}else{
obj.combobox({
valueField:'id',
textField:'name'
});

}

}
};

AddressBox.prototype = {
Clear: function (index) {
var i, ob;
index = index || 0;
for (i = index; i < this.selectboxs.length; ++i) {
ob = $("#" + this.selectboxs[i]);
ob.combobox("clear");  // 清除数据
ob.combobox("loadData", []);// 加载数据
}
},
Load: function (index, pid, initvalue) {
index = index || 0 ;
pid = pid || "156";
var v = parseInt(initvalue);
if (pid) {
var self = this;
$.ajax({
url: '/yxt-admin/admin/address/' + pid + '/name',// 查询地址的sql语句
success: function (back) {
if(back.data) {
var rows = back.data.rows, ob = $("#" + self.selectboxs[index]);
ob.combobox("loadData", rows);
if(initvalue !== undefined){
ob.combobox("setValue", v);
}
}
self = null;
pid = null;
v = null;
}
});
}
},
ReSet:function(){
this.Clear();
// obj = [];
if(window.parent && window.parent.__hospital_adressdata){
var adressdata = window.parent.__hospital_adressdata ,len = this.selectboxs.length, i;
for (i = 0; i < len; ++i) {
this.Load(i, adressdata[i-1], adressdata[i]);
}
}else{
this.Load();
}
}
};

var addressbox = new AddressBox();

调用函数只需要这一步：

// 地址选择
addressbox.ReSet();

当然我添加了数据之后，我还想在同一个地址添加一条数据，那么就要保证你前一条数据的地址，不被清除。但是我的刷新了整个页面的，所以是肯定被清除了的，所以就需要设置 window.parent。

在添加数据的那里添加

if(window.parent){
if(window.parent.__hospital_adressdata){
window.parent.__hospital_adressdata.splice(0,window.parent.__hospital_adressdata.length);
}else{
window.parent.__hospital_adressdata = [];
}
var selectboxs = ["codeName", "code_nameShi", "code_nameQu", "code_namebut", "code_nameSheQu"],
len=selectboxs.length,i;
for(i = 0 ; i < len ; ++i){
window.parent.__hospital_adressdata.push($('#'+ selectboxs[i]).combobox('getValue'));
}
}