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