说说layui的form中的二级联动select注意点
2019-05-28 11:31
1021 查看
【1.加载layui框架】
这个请移驾 https://www.layui.com 不多讲。
【2.举个例子】
//先给出html代码
<form action='' method='post' class='layui-form'> //这个是一级 <div class="layui-input-inline"> <select class="layui-select" lay-filter='rep'> <option value ="">请选择</option> <option value ="1">1</option> <option value ="1">2</option> <option value ="1">3</option> </select> </div> </div> //这个是二级 <div class="layui-form-item"> <div class="layui-input-inline"> <select class="layui-select" id='act'> <option value ="">请选择</option> </select> </div> </div> </form>
再出js代码
form.on('select(rep)',function(data){ //发送一个ajax $.ajax({ url:'#############', type:'post', data:{'no':data.value}, dataType:'json', success:function(data){ var data=(JSON.parse(data))['data']; //获得数据更新之前先删除之前的旧数据 $('#act').html(''); //遍历增加option data.forEach(element => { $('#act').append('<option value ="'+element['no']+'">活动'+element['no']+'</option>'); }); //表单重新渲染 form.render(); } }); });
【3.说说注意事项】
1、form.on(‘select(rep)’,function(data)… 这里的select 指的是监听表单 select元素,rep指的是select的 lay-filter的值,lay-filter是layui中的对象选择器类似DOM 中的id=’’ 。
2、 中的 class=‘layui-form’ 是必须的 否则会不起作用!!
3、这点是我之前困惑的点。首先我认为form.render()方法 活动之表单中所有的元素都会刷新,可能会导致之前已经选中的选择项 回归默认值 。 经过测试 render()不会导致这个问题,具体实现原理还没理清楚。如果有明白的亲 给我留言吧 我看到会回复。不明白的也可以问。看到会回复!!
全文结束!感谢!
相关文章推荐
- layui 地区三级联动 form select 渲染
- jQuery 1.3.2 简单实现select二级联动
- jquery实现select二级联动
- 最简单js代码实现select二级联动下拉菜单(测试通过)
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航
- 省市二级联动--使用app-jquery-cityselect.js插件
- jQuery 1.3.2 简单实现select二级联动
- Select标签下拉列表二级联动级联实例代码
- bootstrap-select下拉搜索插件 动态加载自己数据的二级联动
- <s:select>二级联动
- [置顶] tp5与layui框架实现二级联动加分页效果
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航
- jsp+javascript实现动态下拉二级联动(select+option)
- select 二级联动
- 二级联动Select标签
- VUE2 前端实现 静态二级省市联动选择select的示例
- jQuery 简单实现select二级联动
- 最简单js代码实现select二级联动下拉菜单
- web 中的select二级联动
- layui 二级联动