layui省市区的实现，及编辑时如何返显

第一步：引入layui和jquery

 <link rel="stylesheet" href="./layui/css/layui.css"><script src="./layui/layui.js"></script><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

第二步：HTML代码

 <div class="layui-form"><div class="layui-form-item" id="area-picker"><div class="layui-form-label">网点地址</div><div class="layui-input-inline" style="width: 200px;"><select id="province" name="province" class="province-selector" data-value="广东省"lay-filter="province-1"><option value="">请选择省</option></select></div><div class="layui-input-inline" style="width: 200px;"><select id="city" name="city" class="city-selector" data-value="深圳市" lay-filter="city-1"><option value="">请选择市</option></select></div><div class="layui-input-inline" style="width: 200px;"><select id="county" name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1"><option value="">请选择区</option></select></div></div></div>

第三步：JS代码

<script>//配置插件目录layui.config({base: './mods/',       //layui省市区三级联动, 需要引入配置文件，根据自己引入的地址更改version: '1.0'});//一般直接写在一个js文件中layui.use(['layer', 'form', 'layarea'], function () {var layer = layui.layer,form = layui.form,layarea = layui.layarea;//编辑时返显，将‘河南省’，'郑州市'，'金水区'换成从后台拿的地址就行$('#province').attr("data-value", '河南省');$('#city').attr("data-value", '郑州市');$('#county').attr("data-value", '金水区');layarea.render({elem: '#area-picker',change: function (res) {//选择结果console.log(res);}});});
</script>

注意：一定要引入layui省市区地址的配置文件
点我获取案例及配置文件（不含编辑时返显）

layui省市区的实现，及编辑时如何返显相关推荐

el-upload 上传图片、编辑时图片回显以及后续提交问题
功能描述: 添加图片上传成功在表格内显示该图片点击编辑,打开上传图片对话框,图片回显(与添加共用同一个对话框) html代码:(具体添加.编辑按钮以及表格内显示上传成功的图片html代码就不放了, ...
SpringBoot+MyBatisPlus+DataTables实现退货管理的添加和编辑时控制checkbox的回显选中
场景 SpringBoot+My BatisPlus+DataTables实现企业车间退货管理(学习企业级开发思想): https://blog.csdn.net/BADAO_LIUMANG_QIZH ...
在layui中使用ajax传值给后台,解决layui批量传值到后台操作时出现传值为空的问题...
如图,前台的样子,data的参数为 [ {"good_id":1,"good_name":"标样-总磷","good_num&qu ...
xcode编辑时闪退的问题解决
xcode编辑时闪退的问题解决参考文章: (1)xcode编辑时闪退的问题解决 (2)https://www.cnblogs.com/Rong-Shengcom/p/6554974.html 备忘一 ...
当有键盘时如何在开始编辑时使UITextField向上移动？
使用iOS SDK: 我有一个带有UITextField的UIView , UITextField一个键盘. 我需要它能够: 提起键盘后,允许滚动UIScrollView的内容以查看其他文本字段自动 ...
SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID
场景 SpringBoot+Jquery+jsTree实现页面树型结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897 ...
实现输入框小数多自动进位展示，编辑时实际值不变
今天遇到个业务需求,要求输入框,输入数字的小数位数可以很多位,但移开后显示,只显示小数点后两位 (四舍五入),当要编辑的时候,展现其原来的输入数据. 闲话不多说,当时也考虑用第三方插件,但感觉对现有框 ...
下拉式菜单在GridView编辑时联动选择
父子下拉式菜单DropDownList在GridView编辑时联动选择. 本Demo从添加时的父子DropDownList联动选择,以及在GridView的编辑时联动功能实现. 文件格式:.wmv;大 ...
服务器控件下拉框显示隐藏,演练：在 GridView Web 服务器控件中编辑时显示下拉列表...
演练:在 GridView Web 服务器控件中编辑时显示下拉列表 08/18/2008 本文内容更新:2007 年 11 月 GridView 控件默认显示用于编辑的文本框.可以使用 ASP.NE ...

layui省市区的实现，及编辑时如何返显

layui省市区的实现，及编辑时如何返显相关推荐

最新文章

热门文章