JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-4-17 02:02:52

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.claname+"</option>");  //添加option
                        $item.val(data.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

　　

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

layui与jquery冲突导致下拉框无法显示的解决方法

1、背景：

2、解决

3、代码