三级联动的js代码

三级联动的js代码

简介

不适用其他插件,用jquery调用后台接口,实现行政区划的三级联动功能

html

引入js

     
     
     

areaUtils.js

/**
 * 三级联动,公共js类
 */
//init
var AREAUTILS = function () {};

//initArea
AREAUTILS.prototype.initArea=function (str1,str2,str3){
         var _this=this;
        
         _this.ProvinceBind(str1, str2, str3);
        
          $("#"+str1).change( function () {
                _this.ProvinceOnChange(str1, str2, str3);
          });
        
        $("#"+str1).change( function () {
            _this.CityBind(str1,str2);
        });
        
        $("#"+str2).change(function () {
            _this.CountyBind(str2,str3);
        });
};

//省的onchange事件
AREAUTILS.prototype.ProvinceOnChange =function (str1, str2, str3) {
    var provice = $("#"+str1).attr("value");
    //判断省份这个下拉框选中的值是否为空
    if (provice == 0) {
        $("#"+str2).html("");
        new SELECTUTILS().addDefaultOptionSelected(str2);
       $("#"+str3).html("");
        new SELECTUTILS().addDefaultOptionSelected(str3);
       return;
    }
};

//省的方法
AREAUTILS.prototype.ProvinceBind=function (str1, str2, str3) {
    var _this=this;

   //清空下拉数据
   $("#"+str1).html("");

    $.get("/district", { parentId: 0, level:1}, function(districtData) {
         new SELECTUTILS().addAllOption(str1, districtData);
    }, "json");
    
    new SELECTUTILS().addDefaultOptionSelected(str2);

    new SELECTUTILS().addDefaultOptionSelected(str3);
};

//市的方法
AREAUTILS.prototype.CityBind=function (str1,str2){
    var _this=this;
    var provice = $("#"+str1).attr("value");
    //判断省份这个下拉框选中的值是否为空
    if (provice == "") {
         return;
    }
    $("#"+str2).html("");
        
    $.get("/district", { parentId: provice, level:2}, function(districtData) {
         new SELECTUTILS().addAllOption(str2, districtData);
    }, "json");
    
};


//县的方法
AREAUTILS.prototype.CountyBind=function (str2,str3) {
     var _this=this;
   var city = $("#"+str2).attr("value");
    //判断市这个下拉框选中的值是否为空
   if (city == "") {
       return;
   }
   $("#"+str3).html("");

     $.get("/district", { parentId: city, level:3}, function(districtData) {
          new SELECTUTILS().addAllOption(str3, districtData);
     }, "json");
};

//回显方法
AREAUTILS.prototype.ShowCallBack =function (str1, str2, str3, s1value, s2value, s3value){
        var _this=this;
       _this.ProvinceBindSelected(str1,s1value);
       _this.CityBindSelected(s1value,str2,s2value);
       _this.CountyBindSelected(s2value,str3,s3value);
       _this.BindOnChange(str1, str2, str3);
};

//绑定三级联动的onchange
AREAUTILS.prototype.BindOnChange =function (str1, str2, str3){
              var _this=this;

            $("#"+str1).change( function () {
                _this.CityBind(str1,str2);
            });
            
            $("#"+str2).change(function () {
                _this.CountyBind(str2,str3);
            });
}

//省已经勾选,进行回显
AREAUTILS.prototype.ProvinceBindSelected=function (str1,selected) {
    //清空下拉数据
    $("#"+str1).html("");

      $.get("/district", { parentId: 0, level:1}, function(areaData) {
          new SELECTUTILS().addAllOptionSelected(str1, areaData, '', '', selected);
      }, "json");
};

//市已经勾选,进行回显
AREAUTILS.prototype.CityBindSelected=function (str1Value,str2,selected){
    var provice = str1Value;
    //判断省份这个下拉框选中的值是否为空
    if (provice == "") {
         return;
    }
    $("#"+str2).html("");
        
    $.get("/district", { parentId: provice, level:2}, function(areaData) {
         new SELECTUTILS().addAllOptionSelected(str2, areaData, '', '', selected);
    }, "json");
};
 
//县已经勾选,进行回显
AREAUTILS.prototype.CountyBindSelected=function (str2Value,str3,selected) {
    var city = str2Value;
    //判断市这个下拉框选中的值是否为空
    if (city == "") {
        return;
    }
    $("#"+str3).html("");

      $.get("/district", { parentId: city, level:3}, function(areaData) {
          new SELECTUTILS().addAllOptionSelected(str3, areaData, '', '', selected);
      }, "json");
};

selectUtils.js

/**
 * 下拉框js,公共js类
 */

//init
var SELECTUTILS = function () {};

/**
 * 添加下拉框信息
 * @domId String 下拉框ID
 * @dictData {} 数据
 * @idField id字段
 * @nameField name字段
 */
SELECTUTILS.prototype.addOption =function (domId, dictData, idField, nameField){
     var option = "";
     
     //id
     var finalIdField="";
     if(idField==null || idField==""){
         finalIdField="id";
     }else{
         finalIdField=idField;
     }
     
     //name
     var finalNameField="";
     if(nameField==null || nameField==""){
         finalNameField="name";
     }else{
         finalNameField=nameField;
     }
     
     //for
     for (var i = 0; i < dictData.length; i++) {
         option += "";
     }     
     
     $("#"+domId).find("option").remove();
     $("#" + domId).append(option).selectpicker('refresh');
};

/**
 * 添加下拉框信息(有'请选择')
 * @domId String 下拉框ID
 * @dictData {} 数据
 * @idField id字段
 * @nameField name字段
 */
SELECTUTILS.prototype.addAllOption =function (domId, dictData, idField, nameField){
     var option = "";
     
     //id
     var finalIdField="";
     if(idField==null || idField==""){
         finalIdField="id";
     }else{
         finalIdField=idField;
     }
     
     //name
     var finalNameField="";
     if(nameField==null || nameField==""){
         finalNameField="name";
     }else{
         finalNameField=nameField;
     }
     
         option += "";
        
     for (var i = 0; i < dictData.length; i++) {
         option += "";
     }     
     
     $("#"+domId).find("option").remove();
     $("#" + domId).append(option).selectpicker('refresh');
};

/**
 * 添加下拉框信息(有'请选择'),回显使用
 * @domId String 下拉框ID
 * @dictData {} 数据
 * @idField id字段
 * @nameField name字段
 * @selectId 回显id字段
 */
SELECTUTILS.prototype.addAllOptionSelected =function (domId, dictData, idField, nameField ,selectId){
     var option = "";
     
     //id
     var finalIdField="";
     if(idField==null || idField==""){
         finalIdField="id";
     }else{
         finalIdField=idField;
     }
     
     //name
     var finalNameField="";
     if(nameField==null || nameField==""){
         finalNameField="name";
     }else{
         finalNameField=nameField;
     }
     
         option += "";
        
     for (var i = 0; i < dictData.length; i++) {
         if(selectId==dictData[i][finalIdField]){
             option += "";
         }else{
             option += "";
         }
     }
     $("#"+domId).find("option").remove();
     $("#" + domId).append(option).selectpicker('refresh');
};

//默认情况
SELECTUTILS.prototype.addDefaultOptionSelected =function (domId){
     var option = "";
         option += "";           
     
     $("#"+domId).find("option").remove();
     $("#" + domId).append(option).selectpicker('refresh');
};

/**
 * 验证下拉框为一个有效的选择
 * @domId String 下拉框ID
 * @return boolean
 */
SELECTUTILS.prototype.checkIsSelected =function (domId){
    var flag=true;
    
    var selectValue = $("#"+domId+" option:selected").val();  
    
    //为'undefined'
    if(typeof(selectValue)=='undefined'){
        flag=false;
    }
    //''
    if(selectValue==''){
        flag=false;
    }
    //null
    if(selectValue==null){
        flag=false;
    }
    //为非数字
    var intRe = /^\d+(?=\.{0,1}\d+$|$)/;
    if (!intRe.test(selectValue) && flag==true) {
        flag=false;
    }
    
    return flag;
};

调用(创建与回显)

//创建
new AREAUTILS().initArea("reProvinceDicId","reCityDicId","reCountyDicId");
     
//回显(修改时回显;省份 城市 县镇 对应的domId,以及对应的选中id)
new AREAUTILS().ShowCallBack("reProvinceDicId",   "reCityDicId",   "reCountyDicId",data.reProvinceDicId,data.reCityDicId,data.reCountyDicId);

你可能感兴趣的:(三级联动的js代码)