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>