zoukankan      html  css  js  c++  java
  • 项目中的五级地址联动效果(js)

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

    我使用的是easyui的框架!

     
    地址联动部分html代码!
     <tr>
        <td colspan="4">
        <div id="address_box1">
        省  :<input class="easyui-combobox" name="codeName" id="codeName" style="120px;"/> 
        市  :<input class="easyui-combobox" name="code_nameShi" id="code_nameShi" style="120px;" />
        区/县:  <input class="easyui-combobox" name="code_nameQu" id="code_nameQu" style="120px;"/> 
        街道: <input class="easyui-combobox" name="code_namebut" id="code_namebut" style="150px;" />    
        社区: <input class="easyui-combobox" name="code_nameSheQu" id="code_nameSheQu" style="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'));
                                                                    }
                                                                }
  • 相关阅读:
    生成 n 位验证码的函数
    delphi的procedure of object
    delphi 文本 记录 流式 读写文件
    delphi save .dfm to .txt
    delphi xml
    delphi json
    delphi http server
    dac FDMemTable
    dac oracle
    dac mssql server
  • 原文地址:https://www.cnblogs.com/hellokitty1/p/5545559.html
Copyright © 2011-2022 走看看