Layui的select 框的数据动态加载

约定不等于承诺〃 2023-06-06 10:47 7阅读 0赞

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");
                    //重新渲染 固定写法
                }
          });
    
    });