JS获取省市区/县，layui获取省市区，layui实现省市区联动，jquery实现省市区联动

前言

通过JS方式获取省市区数据，可自己手动更改JS文件数据
非常简单

效果

实现

百度网盘链接: https://pan.baidu.com/s/1RktJgXY0NP7Eq0ohvBPOEA 提取码: 477z
gitee下载链接：https://gitee.com/yuanyongqiang/common-files/blob/master/area.js

下载的area.js说明

默认对象layArea，
layArea.array：存储结构为树形
layArea.array[0].address：获取的是中文名称
layArea.array[0].code：获取的是编号值

引入area.js，开始使用

引入方式可以使用script标签

<script type="text/javascript" src="js/util/area.js"></script>

或者使用layui配置

layui.config({
    
    
    base: "js/util/"
}).extend({
    
    
    layArea: "area",
});
layui.define(['form', 'layArea'], function (exports) {
    
    
	var form = layui.form;
	var layArea= layui.layArea;
	
});

省级

直接这么获取就是所有的数据，不过建议只获取第一级，也就是省级

var array = layArea.array;

市级

根据省级名称获取

var array = layArea.getCityList('广东省');

区级

根据省市名称获取

var array = layArea.getAreaList('广东省', '深圳市');

以上即可！

下面是基于layui相关的实现方式

html中，form中

<div class="layui-form-item">
	<label class="layui-form-label" title="所属省/市/区">
		所属省/市/区
	</label>
	<div class="layui-input-block">
		<div class="layui-input-inline"  style="width: 30%;">
			<select name="province" id="province" lay-filter="province" lay-search=""></select>
		</div>
		<div class="layui-input-inline"  style="width: 30%;">
			<select name="city" id="city" lay-filter="city" lay-search=""></select>
		</div>
		<div class="layui-input-inline"  style="width: 30%;">
			<select name="area" id="area" lay-filter="area" lay-search=""></select>
		</div>
	</div>
</div>

js 写个通用方法

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 加载省/市/区
 * @param array 数据：省/市/区
 * @param lables 设置给哪些标签
 * @param notId 设置标签前置空哪些标签
 * @returns
 */
function loadAddress(array, lables, notId) {
    
    
    var s = '<option value="">请选择</option>';
    if (array) {
    
    
        for (var i = 0; i < array.length; i++) {
    
    
            var obj = array[i];
            s += '<option value="' + obj.address + '" lay-id="' + obj.code + '">' + obj.address + '</option>';
        }
    }
    $(notId).empty();
    $(lables).html(s);
    form.render("select");
}

使用方法

    // 省级选择，获取市
    form.on('select(province)', function (data) {
    
    
        var array = layArea.getCityList(data.value);
        loadAddress(array, "#city", "#city,#area")
    });

    // 市级选择，获取地区/县
    form.on('select(city)', function (data) {
    
    
        var name1 = $("#province").val();
        var array = layArea.getAreaList(name1, data.value);
        loadAddress(array, "#area", "#area")
    });

    // 加载省份
    loadAddress(layArea.array, "#province", "#city,#area");

如上就可以实现级联联动。