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

});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章