layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時(shí)默認(rèn)選中的實(shí)例
更新時(shí)間：2019年09月02日 16:32:46 作者：this is 小瘋子
今天小編就為大家分享一篇layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時(shí)默認(rèn)選中的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
第一步 form表單里寫好一個(gè)下拉框
<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)添加下拉框 同時(shí)可以設(shè)置默認(rèn)值
$.ajax({
url:'../json/selectId.json',
dataType:'json',
//type:'post',
success:function(data){
$.each(data,function(index,item){
console.log(item);
//option 第一個(gè)參數(shù)是頁面顯示的值，第二個(gè)參數(shù)是傳遞到后臺的值
$('#selectId').append(new Option(item.cityName,item.cityId));//往下拉菜單里添加元素
//設(shè)置value（這個(gè)值就可以是在更新的時(shí)候后臺傳遞到前臺的值）為2的值為默認(rèn)選中
$('#selectId').val(2);
})
form.render(); //更新全部表單內(nèi)容
//form.render('select'); //刷新表單select選擇框渲染
}
});
});
模擬后臺傳遞過來的json數(shù)據(jù)
[
{
"cityName":"上海",
"cityId":"1"
},
{
"cityName":"杭州",
"cityId":"2"
},
{
"cityName":"深圳",
"cityId":"3"
},
{
"cityName":"北京",
"cityId":"4"
}
]
展示（默認(rèn)選中cityId=2 即杭州這一項(xiàng)）
以上這篇layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時(shí)默認(rèn)選中的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JavaScript對象詳解之js對象屬性的添加的相關(guān)資料,在JavaScript中對象是通過鍵值對來存儲數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過直接給對象添加屬性的方式來增加對象的屬性,需要的朋友可以參考下2023-07-07
JavaScript實(shí)現(xiàn)仿淘寶商品購買數(shù)量的增減效果
最近接了個(gè)項(xiàng)目，要開發(fā)一個(gè)地方的O2O租書項(xiàng)目，使用的是asp.net mvc技術(shù)，其中咋圖書詳情頁，用戶可以輸入借閱的數(shù)量，器實(shí)現(xiàn)此功能的方法是使用了js來控制數(shù)量的增減和校驗(yàn)，對js實(shí)現(xiàn)商品數(shù)量的增減功能感興趣的朋友一起學(xué)習(xí)吧2016-01-01
下面小編就為大家?guī)硪黄獪\談JS中json數(shù)據(jù)的處理。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
layui table復(fù)選框禁止某幾條勾選的實(shí)例
今天小編就為大家分享一篇layui table復(fù)選框禁止某幾條勾選的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript調(diào)用Activex控件的事件的實(shí)現(xiàn)方法
最近在搞一個(gè)客戶端調(diào)用activex控件的開發(fā)。一些實(shí)現(xiàn)方法小結(jié)，需要的朋友可以參考下。2010-04-04
JavaScript中,可以使用解構(gòu)賦值的方式來對數(shù)組或者對象進(jìn)行變量解構(gòu),下面小編就來為大家詳細(xì)介紹一下JavaScript實(shí)現(xiàn)數(shù)組或者對象解構(gòu)的方法吧
2023-11-11 
js表數(shù)據(jù)排序 sort table data
對于表格的排序，是很不錯(cuò)的一個(gè)功能，方便用戶快速的分析一些數(shù)據(jù)。
2009-02-02 
JavaScript中的break語句和continue語句案例詳解
本文詳細(xì)介紹了JavaScript中的break和continue語句的用法及其應(yīng)用場景,break用于提前退出循環(huán),而continue用于跳過當(dāng)前迭代,還介紹了標(biāo)簽化的break和continue,以及如何在實(shí)際編程中合理使用這些語句以提高代碼的效率和可讀性,感興趣的朋友一起看看吧
2025-03-03 
js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法,實(shí)例分析了oninput與onpropertychange實(shí)現(xiàn)下拉框里自動匹配關(guān)鍵字實(shí)時(shí)監(jiān)聽文本框value值變化的功能,需要的朋友可以參考下
2015-02-02