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

 

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM