layui监听select下拉框获取数据通过doT.js加载页面多选框
2018-01-05 10:37
1021 查看
form表单中的下拉框
>
layui通过lay-filter=”base_id”检测选中事件
在页面html中添加上述方法查到的数据(下面的是页面html)
<select class="layui-input" name="base_id" datatype="*" lay-filter="base_id"> <option value="">请选择</option> <#list baseList as base> <option value="${base.id!''}" disabled="disabled" >${base.base_name!''}</option> <#list base.base_list as ba> <option value="${ba.id!''}"> ${ba.base_name!''}</option> </#list> </#list> </select>
>
layui通过lay-filter=”base_id”检测选中事件
layui.use(['form','util'], function(){ var form = layui.form; /*监听select框*/ form.on('select(base_id)', function(data){ var base_id = data.value; //remove掉原来的html $('#reSpec').remove(); if(base_id==""){ parent.layer.alert("请选择联系人"); }else{ selectspec(base_id); } }); /*数据新增方法增加checkbox*/ function selectspec(base_id) { $.ajax({ type : "post", url : "${ctx}/origin/goods/select_spec", data : {base_id,base_id}, // 你的formid error : function(request) { parent.layer.alert("网络超时"); }, success : function(data) { if (data.length != 0) { var evaluation = doT.template($('#adTemp').html());//组装数据 $("#spec").append(evaluation(data));//添加到id="spec"中 form.render();//重新渲染,应为动态加载所以需要重新渲染 } } }); }; });
在页面html中添加上述方法查到的数据(下面的是页面html)
> <div id="spec" > <div class="layui-form-item" id="reSpec"> <label class="layui-form-label">请选择规格:</label> <div class="layui-input-block" > <#list spec as sp> <input type="checkbox" name="spec" lay-skin="primary" <#if goods.spec?contains("${sp}")> checked="checked" </#if> title="${sp}" value="${sp}"> </#list> </div> </div> </div> <script id="adTemp" type="text/x-dot-template"> <div class="layui-form-item" id="reSpec"> <label class="layui-form-label">请选择规格:</label> <div class="layui-input-block" > {{~it:val:index}} <input type="checkbox" name="spec" lay-skin="primary" title="{{=val}}" value="{{=val}}"/> {{~}} </div> </div>
**上述html代码中id为spec的div为页面加载时匹配目前选中的多选框,当触发下base_id属性对应的属性框时会调用查询方法先清除原来数据,在加载新查找的数据。根据id为adTemp的script调用doT.js方法加载新查询的数组,当查询到的数据为对象时取值换做{{==val.name}}判断为空时显示空字符串格式:{{==val.name?val.name:""}}**
相关文章推荐
- js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台
- js 通过post方式打开页面 利用html5本地存储获取数据
- jsp页面加载时文本框通过js获取焦点
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- html中通过JS获取JSON数据并加载的方法
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面
- 纯js实现分页 原理:所有数据已加载好 js通过遍历部分显示 实现分页效果
- js通过提交过来的表单获取表单中的指定数据
- 通过Iframe跨域获取其它站的数据 或获取某页面及数据
- js中获取当前页面url的数据
- js如何获取select下拉框的value以及文本内容
- bboss taglib 通过数据加载器获取数据的分页/列表标签
- 通过两种方法实现在HTML页面加载完毕后运行某个js
- JS获取中文拼音首字母,并通过拼音首字母快速查找页面内的中文内容
- 静态页面 写ajax获取接口 加载数据案例
- 用js通过url传参把数据从一个页面传到另一个页面
- WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据(转)
- 纯js实现分页 原理:所有数据已加载好,js通过遍历部分显示,实现分页效果
- Select下拉框onchange事件获取option的value值 js写法