欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時默認(rèn)選中的實例

 更新時間：2019年09月02日 16:32:46   作者：this is 小瘋子  
今天小編就為大家分享一篇layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時默認(rèn)選中的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

第一步 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)添加下拉框 同時可以設(shè)置默認(rèn)值
 $.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));//往下拉菜單里添加元素
 	//設(shè)置value（這個值就可以是在更新的時候后臺傳遞到前臺的值）為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 即杭州這一項）

以上這篇layui 根據(jù)后臺數(shù)據(jù)動態(tài)創(chuàng)建下拉框并同時默認(rèn)選中的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • Javascript Ajax異步讀取RSS文檔具體實現(xiàn)

    Javascript Ajax異步讀取RSS文檔具體實現(xiàn)

    這篇文章主要介紹了Javascript Ajax異步讀取RSS文檔具體實現(xiàn)，有需要的朋友可以參考一下
    2013-12-12
  • SyntaxHighlighter代碼加色使用方法

    SyntaxHighlighter代碼加色使用方法

    原名：SyntaxHighlighter，是一款用于web頁面的代碼著色工具，可以用來著色多種語言，可以是HTML,CSS,Javascript,還可以是C,JAVA等編程語言。最早見于Yahoo的YUI，當(dāng)時還屬于自由軟件，最近打開官方網(wǎng)站發(fā)現(xiàn)已被goolge收編。
    2008-09-09
  • Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法

    Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法

    這篇文章主要為大家詳細(xì)介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • javascript閉包的使用之按鈕切換功能

    javascript閉包的使用之按鈕切換功能

    閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù).這篇文章通過實例代碼給大家介紹了javascript閉包的使用之按鈕切換功能，感興趣的朋友一起看看吧
    2018-08-08
  • JavaScript canvas基于數(shù)組生成柱狀圖代碼實例

    JavaScript canvas基于數(shù)組生成柱狀圖代碼實例

    這篇文章主要介紹了JavaScript canvas基于數(shù)組生成柱狀圖代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-03-03
  • Javascript 面試題隨筆

    Javascript 面試題隨筆

    前天去面試遇到的一道題，面試的問題大概是當(dāng)test.increase被調(diào)用時，test和test2的count值分別是多少
    2011-03-03
  • 微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例

    微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能,結(jié)合實例形式分析了微信小程序多選框功能實現(xiàn)、布局顯示及全選、取消全選相關(guān)操作技巧,需要的朋友可以參考下
    2019-05-05
  • JS實現(xiàn)簡易計算器

    JS實現(xiàn)簡易計算器

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • 微信小程序?qū)崿F(xiàn)bindtap等事件傳參

    微信小程序?qū)崿F(xiàn)bindtap等事件傳參

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)bindtap等事件傳參，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • PHP+jQuery+Ajax+Mysql如何實現(xiàn)發(fā)表心情功能

    PHP+jQuery+Ajax+Mysql如何實現(xiàn)發(fā)表心情功能

    這篇文章通過php+jquery+ajax+mysql相結(jié)合，實現(xiàn)當(dāng)用戶瀏覽網(wǎng)站文章或者是論壇帖子后，想表達(dá)自己瀏覽后的心情，發(fā)表自己的感受，很多網(wǎng)站都提供了用戶發(fā)表心情的功能，通過此功能可以很直觀的分析文章或者是論壇對瀏覽者的用戶體驗度
    2015-08-08

最新評論