我刚开始是的时候是是写了一个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')); } }