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

简介: 我刚开始是的时候是是写了一个sql语句,但是写了5个函数,来联动地址的。后来请教了前端的师傅,用js来写了一个地址联动的。 我使用的是easyui的框架! 地址联动部分html代码! 省 : 市 : 区/县: 街道: 社区: 因为我的是在添加了一条数据之后,要刷新整个页面。

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

 

相关文章
|
19天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
26 3
|
19天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为旧版JS以保证兼容性。它用于前端项目,功能包括语法转换、插件扩展、灵活配置和丰富的生态系统。Babel确保新特性的使用而不牺牲浏览器支持。** ```markdown - Babel: JavaScript编译器,转化ES6+到兼容旧环境的JS - 保障新语法在不同浏览器的运行 - 支持插件,扩展编译功能 - 灵活配置,适应项目需求 - 富强的生态系统,多样化开发需求 ```
19 4
|
2月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
45 0
|
2月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
87 2
vue.js项目评估流程图特效
|
3月前
VUE.初始化项目报错缺少core-js
VUE.初始化项目报错缺少core-js
48 0
|
13天前
|
监控 JavaScript 前端开发
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript项目中的渐进式采用
【4月更文挑战第30天】TypeScript是JavaScript的超集,引入静态类型、接口等特性,提升代码安全性和可读性。在JavaScript项目中采用TypeScript可享受类型安全、社区支持及优秀工具集成等优势。渐进式采用策略包括评估项目现状、逐步引入新旧模块、编写类型定义文件、配置编译选项和编写测试用例,以提高项目质量和效率。
|
13天前
|
JavaScript 前端开发 开发工具
【TypeScript 技术专栏】使用 TypeScript 重构 JavaScript 项目
【4月更文挑战第30天】TypeScript 在前端开发中日益流行,因其静态类型检查、增强代码可读性和更好的工具支持。本文讨论如何用 TypeScript 重构 JavaScript 项目,包括评估项目、安装 TypeScript 工具、逐步添加类型注解、处理兼容性问题以及解决重构中遇到的问题。重构后,代码质量、团队协作和可维护性均得到提升。通过实例分析,文章为 TypeScript 重构提供指导,助力构建更可靠的前端应用。
|
14天前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
|
14天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
18天前
|
开发框架 前端开发 JavaScript
next.js博客搭建_初始化next项目(第一步)
next.js博客搭建_初始化next项目(第一步)
24 1