JS obtains the province, city/county, layui obtains the province, city, layui realizes the linkage of provinces and cities, and jquery realizes the linkage of provinces and cities

foreword

Obtain the data of provinces and cities through JS, and you can manually change the data of the JS file by yourself.
Very simple

Effect

accomplish

Baidu network disk link: https://pan.baidu.com/s/1RktJgXY0NP7Eq0ohvBPOEA extraction code: 477z
gitee download link: https://gitee.com/yuanyongqiang/common-files/blob/master/area.js

Download the area.js instructions

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

Introduce area.js and start using

The import method can use the script tag

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

Or use layui configuration

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

provincial

Obtaining directly in this way is all the data, but it is recommended to only obtain the first level, that is, the provincial level

var array = layArea.array;

Municipal

Get by provincial name

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

District level

According to the name of the province and city

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

The above is enough!

The following is the implementation based on layui

In html, in 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 write a general method

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 加载省/市/区
 * @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");
}

Instructions

    // 省级选择，获取市
    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");

As above, cascading linkage can be realized.