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

项目中的五级地址联动效果(js)的更多相关文章

  1. 如何在我们项目中利用开源的图表(js chart)

            最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长!       这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使 ...

  2. vue项目中引入animate.css和wow.js

    本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...

  3. vue项目中 如何让外部引入的js模块 的this值 指向vue实例

    当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法, goToUrl(name,query){ if(query){ if(query.addressCode){ vueObje ...

  4. SpringBoot项目中使用Bootstrap 的CSS、JS资源

    首先 需要在 application.properties 文件中添加这句 spring.mvc.static-path-pattern=/** 不然是使用不了的 还有一种办法就是 使用bootstr ...

  5. 我项目中使用userData的实例 UserData.js

    关于userData的介绍,请参见http://hi.baidu.com/kaisep/blog/item/1da9a3312d2da5a15edf0e87.htmlhttp://hi.baidu.c ...

  6. web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法

    感谢http://blog.csdn.net/this_super/article/details/7884383的文章 1.增加静态资源url映射 如Tomcat, Jetty, JBoss, Gl ...

  7. web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法

    感谢http://blog.csdn.net/this_super/article/details/7884383的文章 1.增加静态资源url映射 如Tomcat, Jetty, JBoss, Gl ...

  8. Vue项目中导入excel文件读取成js数组

    1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...

  9. Vue如何使用vue-area-linkage实现地址三级联动效果

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1. ...

随机推荐

  1. centos 6.5源码编译安装subversion 1.8.10

    一.简介 CentOS 6.5的yum源可以安装的SVN客户端版本太低了,1.6.11,所以需要升级到1.8.10,而官网有没有找到1.8.10的安装包,只能选择源码编译安装. 二.安装步骤 参考官网 ...

  2. ie兼容整理

    那里面有东西要长研究 ie bug集合关于如何给各种浏览器打bug,可查询:browser hacks 几篇处理ie问题的帖子,帖子1

  3. assert函数

    这个函数在<cassert>里面,通常用来调试程序. eg: int i=1: assert(i==1):/什么也不做 assert(i==2)://程序会异常退出

  4. Web的Ajax应用开发模式(一)——了解Ajax的使用形式

    寄语: 前天在查看一些公司的招聘要求时,看到有公司要求测试人员了解Ajax,故写此博文旨在帮助测试人员提高自身技术知识水平,愿与广大测试同胞共同进步.(欢迎纠错!!!) 图1: 图2:

  5. iOS静态库和动态库的区别

    一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系统动态加载到内存,供程序调用 ...

  6. #查找列表中元素,移除每个元素的空格,并查找以 a或A开头 并且以 c 结尾的所有元素

    #!/usr/bin/env python #查找列表中元素,移除每个元素的空格,并查找以 a或A开头 并且以 c 结尾的所有元素. #    li = ["alec", &quo ...

  7. SD卡驱动分析(一)

    Android下的SD卡驱动与标准LINUX下的SD卡驱动好像没有太大的区别,这里就以高通的ANDROID 2.3以代表,来简要分析一下LINUX下SD卡驱动的写法.由于小弟的技术有限,分析的有错的地 ...

  8. C#String详解

    字符串:stringLength - 字符串的长度. TrimStart() 压缩空格即消除字符串开始空格TrimEnd() 消除结尾空格Trim() 同时消除开头和结尾空格.注:中间空格不消除,因为 ...

  9. GitHub如何在自己的Stars中进行搜索

    默认的搜索结果,仅仅搜索原创的repository 想要搜索的时候,能够搜索到fork出来的repository的话 在关键字后面加上空格 fork:true

  10. 指令随笔之:tail、cat、scp、&、&&、;、|、>、>>

    tail(中文意思是跟踪)   tail默认只看文件的最后10行内容,cat则一次显示全部内容 ping 192.168.120.204 > zyx.log &    #  &表 ...