Layui conflict with jquery causes the dropdown box to not display the workaround

1. Background:

When using the Layui framework to write JSPs, use Ajax to pass data to refresh the form, discovering that using AJAX to refer to external jquery and Layui comes with jquery, which could be $ cause the option in the Select drop-down box cannot be in lay Normal use in the UI (that is, the data is passed, but the drop-down box does not have any data)

2. Solve

Check out the solution on the Internet. One workaround is to refer to other jquery before Layui.js . But found that there was no egg to use .

It was later discovered that Ajax passed data after loading the page, causing the imported option not to be rendered at the first time by Layui (and of course the cause of the $ sign conflict).

You need to re-render using Form.render () after updating the form elements.

3. Code

functionLoadcallclass () {$.ajax ({dataType:"JSON",//data type is in JSON formatContentType: "application/x-www-form-urlencoded; Charset=utf-8 ", URL:"ope?method=calllist&id=" + "${userid}" + "",//name of the servlet fileType: "POST", Success:function(data,textstatus) {var$sel = $ ("#classes"); varoptionstring = "";  for(varIinchdata)                        {Console.log ($sel); $item= $ ("<option>" +data[i].claname+ "</option>");//Add Option$item. Val (Data[i].claid);//add option's value$sel. Append ($item);//add option to selectLayui.use ([' Layer ', ' form ',function(){                              varLayer =Layui.layer, Form=Layui.form (); Form.render (' SELECT ');                    });         }                  }             }); } 

View Code

The corresponding body code:

<Bodyonload= "Loadcallclass ()">    <Selectname= "Classes"class= "Layui-input search_input"ID= "Classes">    <optionvalue=""></option>    </Select></Body>

View Code

　　

Layui conflict with jquery causes the dropdown box to not display the workaround