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>
原文地址：https://www.cnblogs.com/end-emptiness/p/9186374.html
时间： 2024-09-28 22:12:53