博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
项目中的五级地址联动效果(js)
阅读量:6693 次
发布时间:2019-06-25

本文共 4979 字,大约阅读时间需要 16 分钟。

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

我使用的是easyui的框架!

地址联动部分html代码!         
省 :
市 :
区/县:
街道:
社区:

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

 

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
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'));                                                                }                                                            }

 

转载地址:http://vtjoo.baihongyu.com/

你可能感兴趣的文章
推荐引擎
查看>>
Mac版:上传图片到远程图床哪家强?
查看>>
Android学习系列-----2 Activity的生命周期与启动模式
查看>>
前端真的能做到彻底权限控制吗?
查看>>
EdgeX Foundry边缘计算框架-核心服务层
查看>>
【294天】每日项目总结系列032(2017.11.26)
查看>>
LVM动态扩展
查看>>
MongoDB副本集搭建
查看>>
JS数组交集 并集 差集
查看>>
webpack中打包后端模板的思路
查看>>
腾讯前端求职直播课——简历篇
查看>>
【译】JS基础算法脚本:查找字符串中最长的子字符
查看>>
项目 - 收藏集 - 掘金
查看>>
从零开始用 Flask 搭建一个网站(二)
查看>>
js中的for in和for each in的用法和区别
查看>>
夏日葵电商:微信商城初步搭建,如何提高产品转化率
查看>>
利用vue-cli配合vue-router搭建一个完整的spa流程(一)
查看>>
Microsoft推出适用于Win 8.1和Win10的KB 4010250 Flash Player更新
查看>>
JS的内置对象系列:Array(一)
查看>>
微软宣布开源WPF、WinForms和WinUI
查看>>