jQuery WeUI动态获取省地市三级联动

使用require.js模块化导入 必须加载jquery-weui.min.js 可更具实际情况修改
可参考：https://requirejs.org/ 模块化相关配置

define(['zepto', 'weui', 'request'], function ($, weui, request) {

  var raw = [], currentProvince, currentCity, currentDistrict;


  var format = function (data) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
      var d = data[i];
      if (/^请选择|市辖区/.test(d.label)) continue;
      result.push(d);
    }
    if (result.length) return result;
    return [];
  };

  //判断子类
  var sub = function (data) {
    if (!data.children) return [{ label: '', id: data.id }];  // 有可能某些县级市没有区
    return format(data.children);
  };

  //遍历选中数据
  var getCities = function (d) {
    for (var i = 0; i < raw.length; i++) {
      if (raw[i].id === d || raw[i].label === d) return sub(raw[i]);
    }
    return [];
  };


  var dateLable = function (d) {
    return d.map(function (d) {
      return { label: d.label, ids: d.id }
    })
  }

  /**
   * 初始化省地市默认名称
   **/
  var initData = function (d) {
    currentProvince = d[0].label;
    currentCity = d[0].children[0].label;
    currentDistrict = d[0].children[0].children[0].label;
  }

  /**
   * 遍历省 市当前选中
   * @param {*} p 
   * @param {*} c 
   */
  var getDistricts = function (p, c) {
    for (var i = 0; i < raw.length; i++) {
      if (raw[i].id === p || raw[i].label === p) {
        if (raw[i].children && raw[i].children.length > 0) {
          for (var j = 0; j < raw[i].children.length; j++) {
            if (raw[i].children[j].id === c || raw[i].children[j].label === c) {
              return sub(raw[i].children[j]);
            }
          }
        }
      }
    }
  };

  /**
   * 默认数据选中初始化
   * @param {*} val 
   */
  var parseInitValue = function (val) {
    var p = raw[0], c, d;
    var tokens = val.split(' ');
    raw.map(function (t) {
      if (t.label === tokens[0]) p = t;
    });

    p.children.map(function (t) {
      if (t.label === tokens[1]) c = t;
    })

    if (tokens[2]) {
      c.children.map(function (t) {
        if (t.label === tokens[2]) d = t;
      })
    }

    if (d) return [p.id, c.id, d.id];
    return [p.id, c.id];
  }


  /**
   * 函数主入口
   * @param {*} option 
   */
  var init = function (option = {}) {
    if (!Object.prototype.toString.call(option) === '[Object Object]') {
      console.error("初始化数据错误");
      return
    }
    raw = option.data || [];
    initData(raw);
    var el = option.el || '';

    var cols = [
      {
        displayValues: dateLable(raw).map(function (v) { return v.label }),
        values: dateLable(raw).map(function (v) { return v.ids }),
        cssClass: "col-province"
      },
      {
        displayValues: dateLable(raw[0].children).map(function (v) { return v.label }),
        values: dateLable(raw[0].children).map(function (v) { return v.ids }),
        cssClass: "col-city"
      },
      {
        displayValues: dateLable(raw[0].children[0].children).map(function (v) { return v.label }),
        values: dateLable(raw[0].children[0].children).map(function (v) { return v.ids }),
        cssClass: "col-county"
      }
    ];

    var config = {
      cols: cols,
      cssClass: "city-picker",
      rotateEffect: false,  //为了性能
      formatValue: function (p, values, displayValues) {
        return displayValues.join(' ');
      },
      onChange: function (picker, values, displayValues) {
        var newProvince = picker.cols[0].displayValue;
        if (newProvince !== currentProvince) {
          var newCities = getCities(newProvince);
          newCity = newCities[0].label;
          var newDistricts = getDistricts(newProvince, newCity);
          picker.cols[1].replaceValues(newCities.map(function (c) {
            return c.id;
          }), newCities.map(function (c) {
            return c.label;
          }));

          if (newDistricts) {
            picker.cols[2].replaceValues(newDistricts.map(function (d) {
              return d.id;
            }), newDistricts.map(function (d) {
              return d.label;
            }));
          } else {
            picker.cols[2].replaceValues([])
          }
          currentProvince = newProvince;
          currentCity = newCity;
          picker.updateValue();
          return false;
        } else {
          newCity = picker.cols[1].displayValue;
          if (newCity !== currentCity) {
            var districts = getDistricts(newProvince, newCity);
            picker.cols[2].replaceValues(districts.map(function (d) {
              return d.id;
            }), districts.map(function (d) {
              return d.label;
            }));
            currentCity = newCity;
            picker.updateValue();
            return false; // 因为数据未更新完，所以这里不进行后序的值的处理
          }
        }
        //var len = (values[values.length - 1] ? values.length - 1 : values.length - 2)
        $(el).val(values.join(" "))
        //$(el).attr('data-code', values[len]);
        //$(el).attr('data-codes', values.join(','));
        option.onOk && option.onOk.call(picker, values, displayValues);
      },
      cols: cols
    };

    if (!el) return
    var p = Object.assign(option, config);
    //初始化数据默认
    var val = $(el).val();
    if (!val) val = '北京 北京市 东城区';
    currentProvince = val.split(" ")[0];
    currentCity = val.split(" ")[1];
    currentDistrict = val.split(" ")[2];
    if (val) {
      p.value = parseInitValue(val);
      if (p.value[0]) {
        var cities = getCities(p.value[0]);
        p.cols[1].values = cities.map(function (c) {
          return c.id;
        });
        p.cols[1].displayValues = cities.map(function (c) {
          return c.label;
        });
      }

      if (p.value[1]) {
        var dis = getDistricts(p.value[0], p.value[1]);
        p.cols[2].values = dis.map(function (d) {
          return d.id;
        });
        p.cols[2].displayValues = dis.map(function (d) {
          return d.label;
        });
      } else {
        var dis = getDistricts(p.value[0], p.cols[1].values[0]);
        p.cols[2].values = dis.map(function (d) {
          return d.id;
        });
        p.cols[2].displayValues = dis.map(function (d) {
          return d.label;
        });
      }
    }
    $(el).picker(config)
  }

  return {
    init: init,
  };

});

如何调用？

require(['zepto', 'weui', 'request', 'autograph', 'cityPicker'], function ($, weui, api, autograph, cityPicker) {

api.get('/api/area/list', {}, function (res) {
    cityPicker.init({
      el: 'input[name="address"]',  //绑定节点
      data: res.data,   //返回的数据
      onOk: function (picker, values, displayValues) {
			//picker    id数组
			//values    名称数组
      }
    });
  })
})

页面调用

<input type="text" name="address" placeholder="请输入您的常驻地址" />

数据格式字段

[{
	id:100001,
	label:'北京'，
	children：[
		{
			id:100002,
			label:'北京市'，
			children：[
				{
					id:100003,
					label:'朝阳区'，
				}，
				{
					id:100004,
					label:'海淀区'，
				}
			]
		}
	]
},{
	id:100001,
	label:'天津'，
	children：[
		{
			id:100002,
			label:'天津市'，
		}
	]
}]