layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時默認選中的實例
更新時間：2019年09月02日 16:32:46 作者：this is 小瘋子
今天小編就為大家分享一篇layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時默認選中的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
第一步 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模塊 動態(tài)給select添加option
layui.use(['form','jquery'], function(){
//----------模塊----------
var form = layui.form,$=layui.$;
//動態(tài)添加下拉框 同時可以設置默認值
$.ajax({
url:'../json/selectId.json',
dataType:'json',
//type:'post',
success:function(data){
$.each(data,function(index,item){
console.log(item);
//option 第一個參數(shù)是頁面顯示的值，第二個參數(shù)是傳遞到后臺的值
$('#selectId').append(new Option(item.cityName,item.cityId));//往下拉菜單里添加元素
//設置value（這個值就可以是在更新的時候后臺傳遞到前臺的值）為2的值為默認選中
$('#selectId').val(2);
})
form.render(); //更新全部表單內容
//form.render('select'); //刷新表單select選擇框渲染
}
});
});
模擬后臺傳遞過來的json數(shù)據(jù)
[
{
"cityName":"上海",
"cityId":"1"
},
{
"cityName":"杭州",
"cityId":"2"
},
{
"cityName":"深圳",
"cityId":"3"
},
{
"cityName":"北京",
"cityId":"4"
}
]
展示（默認選中cityId=2 即杭州這一項）
以上這篇layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時默認選中的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Javascript Ajax異步讀取RSS文檔具體實現(xiàn)
這篇文章主要介紹了Javascript Ajax異步讀取RSS文檔具體實現(xiàn)，有需要的朋友可以參考一下2013-12-12
原名：SyntaxHighlighter，是一款用于web頁面的代碼著色工具，可以用來著色多種語言，可以是HTML,CSS,Javascript,還可以是C,JAVA等編程語言。最早見于Yahoo的YUI，當時還屬于自由軟件，最近打開官方網(wǎng)站發(fā)現(xiàn)已被goolge收編。2008-09-09
Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
閉包就是能夠讀取其他函數(shù)內部變量的函數(shù).這篇文章通過實例代碼給大家介紹了javascript閉包的使用之按鈕切換功能，感興趣的朋友一起看看吧2018-08-08
JavaScript canvas基于數(shù)組生成柱狀圖代碼實例
這篇文章主要介紹了JavaScript canvas基于數(shù)組生成柱狀圖代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
前天去面試遇到的一道題，面試的問題大概是當test.increase被調用時，test和test2的count值分別是多少2011-03-03
這篇文章主要介紹了微信小程序實現(xiàn)多選框全選與取消全選功能,結合實例形式分析了微信小程序多選框功能實現(xiàn)、布局顯示及全選、取消全選相關操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了微信小程序實現(xiàn)bindtap等事件傳參，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
PHP+jQuery+Ajax+Mysql如何實現(xiàn)發(fā)表心情功能
這篇文章通過php+jquery+ajax+mysql相結合，實現(xiàn)當用戶瀏覽網(wǎng)站文章或者是論壇帖子后，想表達自己瀏覽后的心情，發(fā)表自己的感受，很多網(wǎng)站都提供了用戶發(fā)表心情的功能，通過此功能可以很直觀的分析文章或者是論壇對瀏覽者的用戶體驗度2015-08-08