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 = '请选择';if (array) {for (var i = 0; i < array.length; i++) {var obj = array[i];s += '+ obj.address + '" lay-id="' + obj.code + '">' + obj.address + '';}}$(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");

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！