Layui的select 框的数据动态加载

html代码

    <div style="width: 300px">
           <select name="deviceid" id="deviceid" lay-verify="required" lay-filter="xmFilter">
                   <option value="">先选择类型</option>
           </select>
   </div>

js代码
备注：1、首先得定义from表单。通过前三行代码定义，因为所有的下拉动态数据都通过from对象进行渲染
2、再通过ajax请求去加载需要渲染的数据。
3、创建Option对象。new Option(item.ipaddress, item.deviceid); 第一个值为text。第二个值为value
4、若要设置下拉选不可选中，可以给对象注入值 option.setAttribute(“disabled”,"");
5、然后将option添加到下拉选中 $(’#deviceid’).append(option);// 下拉菜单里添加元素
6、最后用from 将数据渲染到下拉选中 form.render(“select”);

var form 
layui.use(['form', 'upload', 'layer'], function () {
    form = layui.form;
         $.ajax({
                        url: 'deviceInfo/getAllDevice.action',
            dataType: 'json',
            type: 'get',
            async: false,
            success: function (data) {
                $.each(data, function (index, item) {
                    if(item.usestatus==1&&item.deviceid!=deviceid){
                        var option;
                        if(item.devicename==null||item.devicename==""||item.devicename=="null"){
                            option = new Option(item.ipaddress, item.deviceid);
                        }else{
                            option = new Option(item.devicename, item.deviceid);
                        }
                        option.setAttribute("disabled","");
                        $('#deviceid').append(option);// 下拉菜单里添加元素
                    }else{
                        var option;
                        if(item.devicename==null||item.devicename==""||item.devicename=="null"){
                            option = new Option(item.ipaddress, item.deviceid);
                        }else{
                            option = new Option(item.devicename, item.deviceid);
                        }
                        $('#deviceid').append(option);// 下拉菜单里添加元素
                    }
                });
                form.render("select");
                //重新渲染 固定写法
            }
      });

});