layui联动选择框

表单

代码

<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")@ResponseBodypublic 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")@ResponseBodypublic 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")@ResponseBodypublic 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联动选择框相关推荐

web 端省市区三级联动选择框
web 端省市区三级联动选择框 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
二级联动选择框的实现
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 实现的效果就是当选择大类时,小 ...
用Ext 2.0 combobox 做的省份和城市联动选择框
因项目需要,做了这个,发上来给大家参考一下,呵呵. 刚开始的思路是通过定义好的数组通过combobox的store的loadData方式加载数据,后来发现还不如直接定义好数组格式就是store的格式, ...
html省市区选择器代码,js实现一个省市区三级联动选择框代码分享
运行效果: ================================================= 部分代码: ====================================== ...
解决小米2s手机 select选择框问题
解决小米2s手机 select选择框文本内容不能改变中学习到的时间:2015-07-17 项目:甘肃银行-手机银行问题记录:有一组选择框,第一个选择框选择存储类型(零存整取.整存整取.定活两便), ...
layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件(含代码.案例.截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head>< ...
antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作
一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行 ...
layui下拉框联动查询效果
前言之前有这么一个功能,需要设计一个联动效果来联动几个选择框,假设这里是院系-专业-班级,又或者省-市-县,又或者一级部门-二级部门等等的,一个下拉框选择联动另一个下拉框,其实都是异曲同工之妙. 解 ...
LayUI可选择可输入下拉框
LayUI可选择可输入下拉框可输入的下拉框把input 叠加到select上,外观看起来像一个框. 利用z-index把 input框放到select 上层.并让select 不自动填充. 我现在 ...

layui联动选择框

layui联动选择框相关推荐

最新文章

热门文章