-
2020-08-05 17:09:30
基于layui封装了一个地址选择器,地址数据采用weui的city-picker。因为项目很多都封装在common里面,
所以该common只抽出showCity和getCity方法。一、用法
1. html写法
name和lay-filter必须保持统一,data-area是地址默认值
<select name="province" data-area="广东省" lay-filter="province"><option value="">选择省</option></select> <select name="city" data-area="广州市" lay-filter="city"><option value="">选择市</option></select> <select name="district" data-area="天河区" lay-filter="district"><option value="">选择区</option></select> <h3>2. 需引入city-picker.js地址数据文件</h3> <script type="text/javascript" src="js/city-picker.js"></script>
如果未引入,则会提示未引用地址数据3. layui引入common模块
//config的设置是全局的 layui.config({ base: 'js/' //假设这是你存放拓展模块的根目录 }).extend({ //设定模块别名 common: 'common' //如果 common.js 是在根目录,也可以不用设定别名 });
4. 使用模块
layui.use(['form', 'common'], function(){ var common = layui.common, form = layui.form; //三级地址联动 common.showCity('province', 'city', 'district'); //监听提交 form.on('submit(formDemo)', function(data){ var resData = data.field, province = resData.province, city = resData.city, district = resData.district; console.log(province, city, district) // 440000 440100 440106 // 通过地址code码获取地址名称 var address = common.getCity({ province, city, district }); console.log(address); // {provinceName: "广东省", cityName: "广州市", districtName: "天河区"} return false; }); });
二、相关API
common有两个方法, showCity用来加载地址选择器, getCity用来由地址code码获取地址名称。
方法名 说明 type showCity [param1]省 [param2]市 [param3]县 string getCity [option]{param1 code param2 code param3 code} object 三、演示
layui三级联动地址(省市区)下拉框实现演示:https://www.zhe94.com/code/layui-select-address-master/
更多相关内容 -
layui实现下拉框三级联动
2020-10-16 15:23:22主要为大家详细介绍了layui实现下拉框三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
jquery基于layui实现二级联动下拉选择(省份城市选择)
2020-10-19 16:17:25本篇文章主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择),具有一定的实用价值,需要的朋友可以参考下 -
layui省市区三级联动城市选择
2019-09-09 13:46:10使用jQuery基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码。 -
layui地址联动demo+sql
2019-10-15 11:29:49layui地址联动demo+sql+layui地址联动demo+sql+layui地址联动demo+sql+layui地址联动demo+sql -
layui地址联动sql
2019-10-14 17:19:58实现全国城市联动选择 layui+Thinkphp,layui的地址选择,地址sql语句 -
基于LayUI省市区三级联动
2021-06-26 09:14:21基于LayUI省市区三级联动,可以联动选择相应的内容 -
layui联动选择框
2019-12-23 15:57:55form class="layui-form" style="padding-top: 20px;" action="stockSave" method="post"> <div class="layui-form-item"> <div class="layui-inline"> <label class...表单
代码
<form class="layui-form" style="padding-top: 20px;" action="stockSave" method="post"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">入库单号:</label> <div class="layui-input-inline"> <input type="text" name="enterStockId" autocomplete="off" class="layui-input" value="${enterStockId}" readonly="readonly"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">供应商:</label> <div class="layui-input-inline"> <select name="supplier" lay-verify="required"> <option value="">请选择</option> <option value="京东商城" selected="">京东商城</option> </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">入库日期:</label> <div class="layui-input-inline"> <input type="text" name="enterDate" id="enterDate" class="layui-input" lay-verify="date" placeholder="yyyy-MM-dd"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">经办人:</label> <div class="layui-input-inline"> <input type="text" name="operator" class="layui-input" value="${user.realName}" readonly="readonly"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">设备类型:</label> <div class="layui-input-inline"> <select name="parentName" lay-filter="parentName" lay-verify="required"> <option value="">请选择</option> <c:forEach items="${types}" var="t"> <option value="${t.parentName }">${t.parentName}</option> </c:forEach> </select> </div> </div> <div class="layui-inline"> <label class="layui-form-label">明细分类:</label> <div class="layui-input-inline"> <select name="childrenName" id="childrenName" lay-filter="childrenName" lay-verify="required"> </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">设备名称:</label> <div class="layui-input-inline"> <select name="goodsName" id="goodsName" lay-filter="goodsName" lay-verify="required"> </select> </div> </div> <div class="layui-inline"> <label class="layui-form-label">规格型号:</label> <div class="layui-input-inline"> <select name="specs" id="specs" lay-verify="required"> </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">入库数量:</label> <div class="layui-input-inline"> <input type="text" name="number" lay-verify="number" autocomplete="off" class="layui-input" placeholder="数量"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="adminInfo">保存</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form>
联动代码
<script type="text/javascript"> layui.use(['form', 'layedit', 'laydate'], function(){ var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate; laydate.render({ elem: '#enterDate' }); }); var info='${info}'; if(info=='ok'){ layui.use('layer', function(){ var layer = layui.layer; layer.alert('入库成功') }); } if(info=='fail'){ layui.use('layer', function(){ var layer = layui.layer; layer.alert("添加失败"); }); } </script> <script type="text/javascript"> layui.use('form', function () { var form = layui.form; form.on('select(parentName)', function(data){ $.getJSON("getChildrenName?parentName="+data.value, function(data){ var optionstring = ""; $.each(data.data, function(i,item){ optionstring += "<option value=\"" + item.childrenName + "\" >" + item.childrenName + "</option>"; }); $("#childrenName").html('<option value=""></option>' + optionstring); form.render('select'); //这个很重要 }); }); form.on('select(childrenName)', function(data){ $.getJSON("getByChildrenName?childrenName="+data.value, function(data){ var optionstring = ""; $.each(data.data, function(i,item){ optionstring += "<option value=\"" + item.goodsName + "\" >" + item.goodsName + "</option>"; }); $("#goodsName").html('<option value=""></option>' + optionstring); form.render('select'); //这个很重要 }); }); form.on('select(goodsName)', function(data){ $.getJSON("getSpecs?goodsName="+data.value, function(data){ var optionstring = ""; $.each(data.data, function(i,item){ optionstring += "<option value=\"" + item.specs + "\" >" + item.specs + "</option>"; }); $("#specs").html('<option value=""></option>' + optionstring); form.render('select'); //这个很重要 }); }); }); </script>
后端代码
/itmanage/src/main/java/com/chief/itmanage/controller/EnterStockController.java
//入库登记 @RequestMapping("addStock") public String addStock(Model model) { Date date=new Date(); DateFormat formatter= new SimpleDateFormat("yyyyMMddHHmmss"); String enterStockId= "rk"+formatter.format(date); model.addAttribute("enterStockId", enterStockId); List<Type> types=typeService.getParentName(); model.addAttribute("types", types); return "addStock"; } // 二级分类选择框 @RequestMapping("getByChildrenName") @ResponseBody public String getByChildrenName(String childrenName) { List<Goods> list = goodsService.getByChildrenName(childrenName); String s = JSON.toJSONString(list); logger.info(s); JSONObject obj = new JSONObject(); // 前台通过key值获得对应的value值 obj.put("code", 0); obj.put("msg", ""); obj.put("data", list); return obj.toJSONString(); } //联动选择框 @RequestMapping("getChildrenName") @ResponseBody public String getChildrenName(String parentName) { List<Type> list=typeService.getChildrenName(parentName); String s = JSON.toJSONString(list); logger.info(s); JSONObject obj = new JSONObject(); // 前台通过key值获得对应的value值 obj.put("code", 0); obj.put("msg", ""); obj.put("data", list); return obj.toJSONString(); } // 型号选择框 @RequestMapping("getSpecs") @ResponseBody public String getSpecs(String goodsName) { List<Goods> list = goodsService.getByGoodsName(goodsName); String s = JSON.toJSONString(list); logger.info(s); JSONObject obj = new JSONObject(); // 前台通过key值获得对应的value值 obj.put("code", 0); obj.put("msg", ""); obj.put("data", list); return obj.toJSONString(); }
最终效果
-
layui下拉框联动查询效果
2020-04-13 23:42:32之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙。 解决方案 *. ...前言
之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙。
解决方案
*. 由于系统代码为
保密
,所以这里只摘录部分
代码并对原有的变量等做了处理
。- HTML部分,两个
select
框。
<label class="layui-form-label">一级部门</label> <select id="departmentFirstLevel" name="departmentFirstLevel"> <option value=""></option> </select> <label class="layui-form-label">二级部门</label> <select id="departmentSecondaryLevel" name="departmentSecondaryLevel"> <option value=""></option> </select>
- 初始化一级部门
function initDepartmentFirstLevel(){ $.ajax({ type: 'POST', url: "${request.contextPath}/departmentFirstLevel/list", data:{"searchParams":"","page":"1","limit":"99"}, success: function (responseData) { if (responseData.code === 200 || responseData.code === 0) { var length = responseData.data.length; console.log("一级部门数量:"+length); $("#departmentFirstLevel").empty(); $("#departmentFirstLevel").append('<option value=""></option>'); for(var i = 0; i < length; i++) { //添加option元素 $("#departmentFirstLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>"); } //如果你是用freemaker,可以用该方法选中变量 $("#departmentFirstLevel").val("${(user.departmentFirstLevel)!!}"); //渲染select form.render('select'); } else { layer.msg("加载列表失败"); } } }); } //直接初始化一级部门 initDepartmentFirstLevel();
- 设置一级部门
联动
二级部门效果。
form.on('select(departmentFirstLevel)', function(data){ //根据一级部门联动二级部门 initDepartmentSecondaryLevel(); });
- 二级部门联动逻辑,核心就是传入
选择的i一级部门id
,传给Controller方法查询并列出对应的二级部门
,产生联动效果。
function initDepartmentSecondaryLevel(){ $.ajax({ type: 'POST', url: "${request.contextPath}/departmentSecondaryLevel/list", data:{"searchParams":"{'departmentFirstLevel':'"+$("#departmentFirstLevel").val()+"'}","page":"1","limit":"99"}, success: function (responseData) { if (responseData.code === 200 || responseData.code === 0) { var length = responseData.data.length; console.log("二级部门数量:"+length); $("#departmentSecondaryLevel").empty(); $("#departmentSecondaryLevel").append('<option value=""></option>'); for(var i = 0; i < length; i++) { //添加option元素 $("#departmentSecondaryLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>"); } //如果你是freemarker,可以用该方法设置选中效果 $("#departmentSecondaryLevel").val("${(user.departmentSecondaryLevel)!!}"); //渲染select form.render('select'); } else { layer.msg("加载列表失败"); } } }); } //如果二级部门数量较少,可以考虑直接初始化(当然, 建议不要)。 //initDepartmentSecondaryLevel()
- HTML部分,两个
-
layui下拉框二级数据联动 fzzx.zip
2020-04-29 16:51:34layui下拉框select动态获取后台数据,下拉框二级联动效果,压缩包里打开a.html即可查看。 -
layui联动菜单搜索select表单选项的设置方法
2021-07-02 10:17:56联动菜单用于需要使用ajax来调用后端数据,如下图: 一级菜单 <div class="layui-input-inline"> <select name="member_depart" lay-verify="required" id="member_depart" lay-filter="member_depart" ...联动菜单用于需要使用ajax来调用后端数据,如下图:
一级菜单
<div class="layui-input-inline"> <select name="member_depart" lay-verify="required" id="member_depart" lay-filter="member_depart" style="height:10px;" lay-search=""> <option value="">选择单位</option> <option value="8,浙江大学">浙江大学</option> <option value="7,宁波大学">宁波大学</option> <option value="4,复旦大学">复旦大学</option> <option value="2,深圳大学">深圳大学</option> <option value="1,北师大附中">北师大附中</option> </select> </div>
其中深圳大学中的value都是id,name组成的字符串,需要在前端JS或者后端语言中对字符串进行预处理,然后才能和数据库进行有效的交互。
监听下拉框数据分离
//监听下拉框 form.on('select(member_depart)', function (data) { var txt = $("#member_depart option:selected").text();//获取select选中的值 $('.member_depart').html(txt); //获取关联部门; //console.log($("#member_depart").val()); if ($("#member_depart").val()){ var member_id = $("#member_depart").val().split(",")[0]; getBranch(member_id); } });
比如需要调用传递过来的调用函数
getBranch(member_id)
,来实现小类数据的调用,就需要member_id = $("#member_depart").val().split(",")[0];
进行数据的split分离。
当然,这是前段不可缺少的步骤。数据查询产生的问题
但是在进行数据查询搜索过程中,如果直接使用该方式,值不为空的情况下,都是成立的。如果为空,则split会进行控制台报错,无法分离","。
解决方案是默认选项中,直接设置为<
option value=",">选择单位</option>
,即可解决编辑状态如何实现选择
如果要编辑数据,但是前端是ajax调用的,使用后端和前端语言就需要原生的混写开发了。
//默认加载,获取同部门同设备下的IP池; $.get('./api/api.php?act=getIPLists&token=3cab7ce4142608c0f40c785b5ab5ca24', { branch_id: branch_id, major_id: major_id }, function (res) { var memberHtml = ''; memberHtml += '<option value="'+pool_address+'">'+pool_address+'</option>'; for (var i = 0; i < res.data.length; i++) { memberHtml += '<option value="' + res.data[i].pool_address + '" >' + res.data[i].pool_address + '</option>' } $('#pool_address').html(memberHtml); form.render(); //监听下拉框 form.on('select(pool_address)', function (data) { var txt = $("#pool_address option:selected").text();//获取select选中的值 $('.pool_address').html(txt); //获取对应IP池信息; transAddress(); }); }, 'json');
即
memberHtml += '<option value="'+pool_address+'">'+pool_address+'</option>';
在ajax的选项中,从后台读取数据库中现存的数据字段直接予以显示,然后再select进行交互。lockdatav Done!
-
layui select下拉框联动
2021-04-09 11:37:17背景:涉及到 省市县获取的项目必有下拉框三级联动,每次都需要百度查询,或者去翻原来的项目,着实不方便。因此,为了自己对三级联动的印象加深,同时也帮助第一次接触下拉框三级联动的小伙伴快速上道,总结一下该... -
LayUI select下拉框联动
2021-07-13 12:32:54LayUI 下拉框联动,选择一个其他根据对应关系自动选择。 HTML代码如下: <div class='layui-fluid'> <div class='layui-card'> <form class="layui-form layui-card-header layuiadmin-card-... -
封装简易实用layui三级联动(一行代码实现).rar
2019-09-20 17:42:01简易的 layui 三级联动 使用只需要一行代码 封装到了layui模块 layui专用 -
解决layui 三级联动下拉框更新时回显的问题
2020-12-10 12:04:45最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change')... -
这里是基于layui开发的省市区三级联动下拉框.zip
2019-07-17 15:44:37这里是基于layui开发的省市区三级联动下拉框这里是基于layui开发的省市区三级联动下拉框这里是基于layui开发的省市区三级联动下拉框 -
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2020-10-16 11:01:28今天小编就为大家分享一篇使用layui日期控件laydate对开始和结束时间进行联动控制的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui 表单form 联动选择
2022-01-26 14:58:26layui 表单form 联动选择 <form class="layui-form kuuuuuuu" action=""> <div class="layui-form-item"> <label class="layui-form-label">联动选择框</label> <div class="layui-... -
layui的select联动实现代码
2020-10-16 07:24:21今天小编就为大家分享一篇layui的select联动实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
layui实现三级联动效果
2020-10-16 15:22:17主要为大家详细介绍了layui实现三级联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
layui 三级联动,简单实现
2021-11-02 20:16:04本文采用 TP5.0 框架 ... <div class="layui-form-item...地址</div> <div class="layui-input-inline" style="width: 200px;"> <select name="province" id="province" lay-filter="province"... -
使用layui+Jquery实现全国地址三级联动
2022-05-27 09:58:23使用layui+Jquery实现全国地址三级联动,实现:选择省级下拉框的值后,将该省下的州市放入到市级下拉框中,选择市级下拉框的值后,将该市下的区县放入到区级下拉框中,并利用onchange事件实时监控下拉框值的变化,将... -
基于 layui 制作地址三级联动
2019-06-12 16:47:31基于layui的select制作地址三级联动,地址数据采用jqweui的city-picker demo:https://mzongx.github.io/layui-select-address/ githud:https://github.com/mzongx/layui-select-address 需要的可以看下,写得不好... -
全国城市地址联动选择layui
2019-10-14 17:21:00全国城市地址联动选择layui HTML–代码 <form class="layui-form"> <div class="layui-form-item layui-form-pane"> <label class="layui-form-label">城市联动</label> <div cla... -
layui下拉框联动
2017-11-09 12:28:51定义下拉框:<div class="layui-input-inline layui-form" lay-filter="prov"> 全部数据来源</option> -
layui怎么实现三级联动
2021-04-18 14:15:48layui实现三级联动的方法:...最后通过layui模块实现三级联动即可。本教程操作环境:windows10系统、layui2.5.6版,该方法适用于所有品牌电脑。基于layui的三级联动模块1.html的页面代码如下:请选择省请选择市请选... -
layui省市区三级联动城市选择.rar
2020-03-20 15:11:21本资源含有html页面,解压后可直接打开点击运行查看效果,代码可直接使用,方便快捷。该三级联动使用layui前端框架编写,可复用性很高。