layui 省市区三级联动
附件省市区数据js
链接:https://pan.baidu.com/s/1NreH2LVyirAjMLjl9nXFKg
提取码:bpdz
省市区数据json
链接:https://pan.baidu.com/s/11V-DF-e7MTcrvYY31Tp3Xw
提取码:rjut
复制这段内容后打开百度网盘手机App,操作更方便哦
<div class="layui-form-item">
<label class="layui-form-label layui-form-required">地区选择</label>
<div class="layui-input-inline">
<input type="text" id="demoCascader1" placeholder="请选择" class="layui-hide" value="{$formData['address']}" name="address" />
</div>
</div>
引入js
{include file="system@block/layui" /}
<script type="text/javascript" src="__PUBLIC_JS__/layui/cascader/citys-data.js"></script>
<script type="text/javascript" src="__PUBLIC_JS__/layui/cascader/cascader.js"></script>
<script>
layui.use(['upload', 'func', 'form','laydate','cascader','admin'], function() {
var $ = layui.jquery, layer = layui.layer,laydate = layui.laydate, upload = layui.upload, func = layui.func, form = layui.form,cascader = layui.cascader;admin = layui.admin;
// 编辑模式下表单自动赋值
func.assign({:json_encode($formData)});
// value也是中文而不是区号 省市区三级联动
var data = cascader.getCityData(admin.util.deepClone(citysData));
cascader.render({
elem: '#demoCascader1',
data: data,
itemHeight: '250px',
filterable: true//开启搜索
});
</script>
由于字数限制下面就截个大概图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200929175135157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2NTQ2OQ==,size_16,color_FFFFFF,t_70#pic_center)