分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

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

发布时间:2023-09-06 02:00责任编辑:傅花花关键词:暂无标签

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

  

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

原文地址:https://www.cnblogs.com/end-emptiness/p/9186374.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved