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');
                        });
                    }  
                } 
            }); 
        }
View Code
复制代码

 

对应的body代码：

复制代码
<body onload="loadCallClass()">
    <select name="classes" class="layui-input search_input" id="classes">
    <option value=""></option>
    </select>
</body>
View Code
复制代码

 

 

 

　　

posted @   二律背反GG  阅读(3965)  评论(2)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署
· 葡萄城 AI 搜索升级：DeepSeek 加持，客户体验更智能
点击右上角即可分享
微信分享提示