【layui】省市区的三级联动

html代码

<!------省市区的三级联动-----!-->
<div class="layui-form-item"><label class="layui-form-label">门店地区</label><div class="layui-input-block"><div class="layui-input-inline addr_inline"><select name="province_code" id="province" lay-filter="province" lay-verify="required"><!-- <option value="">请选择省</option> --></select></div><div class="layui-input-inline addr_inline"><select name="city_code" id="city" lay-filter="city" lay-verify="required"><!-- <option value="">请选择市</option> --></select></div><div class="layui-input-inline addr_inline" style="margin-right: 0;"><select name="district_code" id="area" lay-filter="area"><!-- <option value="">请选择县/区</option> --></select></div></div></div>
<!------省市区的三级联动-----!-->

js代码

 shengshiqu();//省市区的三级联动var str = '', cur_data = '';// 省市县function shengshiqu(){admin.req({url: layui.setter.baseUrl + 'admin/user/getRegionTree',data: {},type: 'get',success: function (res) {if (res.code == 1) {str = res.data;//-------------省var list = "";var list = "<option value=''>请选择省</option>";for (var i in res.data) {list += "<option value='" + res.data[i].value + "'>" + res.data[i].text + "</option>";}$("#province").html(list);if(params.id){ // 编辑form.val('ants_add',{ 'province_code': params.province_code });//市var f_index='';var cate_data='';for(var i in res.data){if(params.province_code==res.data[i].value){f_index=i;cate_data=res.data[i].children;}}var lists="<option value=''>请选择市</option>";for (var j in cate_data) {lists += "<option value='" + cate_data[j].value + "'>" + cate_data[j].text + "</option> ";}$("#city").html(lists);form.val('ants_add',{ 'city_code': params.city_code });//县/区var city_data=res.data[f_index].children;var lists2="<option value=''>请选择县/区</option>";for (var j in city_data) {lists2 += "<option value='" + city_data[j].value + "'>" + city_data[j].text + "</option> ";}$("#area").html(lists2);form.val('ants_add',{ 'district_code': params.district_code });form.render();}form.render('select');} else {layer.msg(res.msg);}}});}// 选择省form.on('select(province)', function (e) {if(e.value == ''){$("#city").html('');$("#area").html('');}else{get_tree(e.value, 0, 0);$("#area").html('');}form.render();});//选择市form.on('select(city)', function (e) {if(e.value == ''){$("#area").html('');}else{get_tree($('#province').val(), e.value, 0);}form.render();});//选择区县form.on('select(area)', function (e) {});function get_tree(p, c, a) {for (var i in str) {if (str[i].value == p) {var city = "<option value=''>请选择市</option>";var city_data = str[i].children;for (var j in city_data) {city += "<option value='" + city_data[j].value + "'>" + city_data[j].text + "</option> ";if (city_data[j].value == c) {var area = "<option value=''>请选择区/县</option>";var area_data = city_data[j].children;if (area_data) {for (var k in area_data) {area += "<option value='" + area_data[k].value + "'>" + area_data[k].text + "</option> ";}$("#area").html(area);form.render();} else {area_data = city_data;for (var k in area_data) {area += "<option value='" + area_data[k].value + "'>" + area_data[k].text + "</option> ";}$("#area").html(area);form.render();}}}$("#city").html(city);if (c != 0) { $("#city").val(c); }form.render();}}}

【layui】省市区的三级联动相关推荐

基于layui 2.*省市级三级联动
不bb,直接上代码,复制后替换layui.css和layui.js可直接使用 <!DOCTYPE html> <html> <head><meta chars ...
省市区(县)三级联动代码（js 数据源）
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
Flutter省市区的三级联动
Flutter省市区的三级联动最近做Flutter项目的时候,需要做一个省市区选择的功能.主要是通过CupertinoPicker组件实现功能的. Expanded(flex: 1,child: C ...
js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
php省城联动_使用php ajax实现一个省市区的三级联动
要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...
Vue + Element UI 中国省市区数据三级联动
安装数据 npm install element-china-area-data 页面引入 import { provinceAndCityData, regionData, provinceAndC ...
layui省市县三级联动，如何设置select选择时，值为省市县code码
上完整代码,可以copy,插件包查看我上传的文件里下载 layui.define(['layer', 'form', 'laytpl'], function (exports) {"use ...
layui 省市县区三级联动下拉选择器
https://fly.layui.com/extend/layarea/#doc 去Git 地址我只把 mods 里的 layarea.js 文件拿出来用了 html 这块样式自己去在去修改然后 ...
省市区地址三级联动jQuery插件Distpicker使用
插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...
python省市区三级联动_Django Admin实现三级联动的示例代码(省市区)
通过自定义Admin的模板文件实现省市区的三级联动.要求创建记录时,根据省>市>区的顺序选择依次显示对应数据. 修改记录时默认显示已存在的数据. Model class Member(mo ...

【layui】省市区的三级联动

【layui】省市区的三级联动相关推荐

最新文章

热门文章