Layui的select 框的数据动态加载

时间:2025-01-20 09:32:52

html代码

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

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

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

});