layui与jquery冲突导致下拉框无法显示的解决方法
Posted end-emptiness
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui与jquery冲突导致下拉框无法显示的解决方法相关的知识,希望对你有一定的参考价值。
1、背景:
在使用 layui 框架写 jsp 的时候,使用 ajax 传递数据来刷新表单,发现使用 ajax 引用外部的jquery 和 layui 自带的jquery中,可能是 $ 导致select 下拉框中的option 没法在layui中正常使用(即数据传过去了,但是点击下拉框没有任何数据)
2、解决
查了一下网上的解决方法。有个解决方法是 在layui.js之前引用其他jquery 。但是发现 并没有什么卵用。
后来发现,ajax传递数据在加载页面之后,导致了导入的option没有在第一时间被layui渲染(当然也有 $ 符号冲突的原因)。
需要在更新过表单元素后要使用 form.render() 重新渲染。
3、代码
function loadCallClass(){ $.ajax({ dataType:"json", //数据类型为json格式 contentType: "application/x-www-form-urlencoded; charset=utf-8", url:"ope?method=calllist&id="+"${userid}"+"",//servlet文件的名称 type:"POST", success:function(data,textStatus){ var $sel = $("#classes"); var optionString = ""; for ( var i in data) { console.log($sel); $item = $("<option>"+data[i].claname+"</option>"); //添加option $item.val(data[i].claid); //添加option的value $sel.append($item); //将option添加进select layui.use([‘layer‘, ‘form‘], function(){ var layer = layui.layer ,form = layui.form(); form.render(‘select‘); }); } } }); }
对应的body代码:
<body onload="loadCallClass()"> <select name="classes" class="layui-input search_input" id="classes"> <option value=""></option> </select> </body>
以上是关于layui与jquery冲突导致下拉框无法显示的解决方法的主要内容,如果未能解决你的问题,请参考以下文章