溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
第一步 form表單里寫好一個下拉框
<div class="layui-form-item"> <label class="layui-form-label">下拉選擇框</label> <div class="layui-input-block"> <select id="selectId" name="interest" lay-filter="city"> </select> </div> </div>
第二步 layui 加載jquery模塊 動態給select添加option
layui.use(['form','jquery'], function(){
//----------模塊----------
var form = layui.form,$=layui.$;
//動態添加下拉框 同時可以設置默認值
$.ajax({
url:'../json/selectId.json',
dataType:'json',
//type:'post',
success:function(data){
$.each(data,function(index,item){
console.log(item);
//option 第一個參數是頁面顯示的值，第二個參數是傳遞到后臺的值
$('#selectId').append(new Option(item.cityName,item.cityId));//往下拉菜單里添加元素
//設置value（這個值就可以是在更新的時候后臺傳遞到前臺的值）為2的值為默認選中
$('#selectId').val(2);
})
form.render(); //更新全部表單內容
//form.render('select'); //刷新表單select選擇框渲染
}
});
});
模擬后臺傳遞過來的json數據
[
{
"cityName":"上海",
"cityId":"1"
},
{
"cityName":"杭州",
"cityId":"2"
},
{
"cityName":"深圳",
"cityId":"3"
},
{
"cityName":"北京",
"cityId":"4"
}
]
展示（默認選中cityId=2 即杭州這一項）
以上這篇layui 根據后臺數據動態創建下拉框并同時默認選中的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
