layui做城市三级联动代码介绍

layui怎么做城市三级联动，下面web建站小编给大家详细介绍一下！

先引入layui.css、layui.js

1、html代码介绍

<p class="layui-form">
  <p class="layui-input-inline">
    <select name="province" lay-filter="province" class="province">
      <option value="">请选择省</option>
    </select>
  </p>
  <p class="layui-input-inline">
    <select name="city" lay-filter="city" disabled>
      <option value="">请选择市</option>
    </select>
  </p>
  <p class="layui-input-inline">
    <select name="area" lay-filter="area" disabled>
      <option value="">请选择县/区</option>
    </select>
  </p>
</p>

2、js代码

layui.config({
    base : "../../../js/address.js"
  }).use([ 'layer', 'jquery', "address" ], function() {
    var layer = layui.layer, $ = layui.jquery, address = layui.address();
  });

3、address.js代码

layui.define(["form","jquery"],function(exports){
  
  var form = layui.form,
    $ = layui.jquery,
    Address = function(){};
    
  Address.prototype.provinces = function() {
    //加载省数据
    var proHtml = '',that = this;
    $.get("address.json", function (data) {
      for (var i = 0; i < data.length; i++) {
        proHtml += '' + data[i].name + '';
      }
      //初始化省数据
      $("select[name=province]").append(proHtml);
      form.render();
      form.on('select(province)', function (proData) {
        $("select[name=area]").html('请选择县/区');
        var value = proData.value;
        if (value > 0) {
          that.citys(data[$(this).index() - 1].childs);
        } else {
          $("select[name=city]").attr("disabled", "disabled");
        }
      });
    })
  }
  
  //加载市数据
  Address.prototype.citys = function(citys) {
    var cityHtml = '请选择市',that = this;
    for (var i = 0; i < citys.length; i++) {
        cityHtml += '' + citys[i].name + '';
    }
    $("select[name=city]").html(cityHtml).removeAttr("disabled");
    form.render();
    form.on('select(city)', function (cityData) {
      var value = cityData.value;
      if (value > 0) {
        that.areas(citys[$(this).index() - 1].childs);
      } else {
        $("select[name=area]").attr("disabled", "disabled");
      }
    });
  }
  
  //加载县/区数据
  Address.prototype.areas = function(areas) {
    var areaHtml = '请选择县/区';
    for (var i = 0; i < areas.length; i++) {
        areaHtml += '' + areas[i].name + '';
    }
    $("select[name=area]").html(areaHtml).removeAttr("disabled");
    form.render();
  }
  
  var address = new Address();
  exports("address",function(){
    address.provinces();
  });
});

4、address.json代码

[{
  "code": "11",
  "name": "北京市",
  "childs": [{
  	"code": "1101",
  	"name": "市辖区",
  	"childs": [{
  	  "code": "110101",
  	  "name": "东城区"
  	}, {
  	  "code": "110102",
  	  "name": "西城区"
  	}
  	...
  	]
  },...]
},....]

本文链接：http://so.lmcjl.com/news/24389/