今天收到了客戶(hù)的需求，要求在新增停車(chē)場(chǎng)ID的時(shí)候要從數(shù)據(jù)庫(kù)查出來(lái)對(duì)應(yīng)的停車(chē)場(chǎng)名稱(chēng)然后顯示在界面上。保存的時(shí)候按照停車(chē)場(chǎng)ID進(jìn)行保存。

自己首先把后臺(tái)的部分寫(xiě)完了，測(cè)試了接口數(shù)據(jù)。成功的拿到了ajax數(shù)據(jù)。

接下來(lái)，自己用了select下拉標(biāo)簽和js函數(shù)進(jìn)行填充后臺(tái)傳過(guò)來(lái)的數(shù)據(jù)。

經(jīng)過(guò)自己的不斷百度和參考別人的博客，試了很多次終于成功的調(diào)試出了想要的結(jié)果。 特來(lái)博客記錄一下，也分享一下開(kāi)心的心情。

（一）首先引入樣式和JS文件

　　樣式文件和JS下載放到本地最好，因?yàn)榉诺奖镜刈约嚎梢孕薷囊恍〇|西。

　　在head中引入css樣式文件

<link href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css" rel="stylesheet">

　　在script上方引入js文件?

<script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script> <script th:src="@{/js/jquery.min.js}"></script> 　　//jquery應(yīng)該每個(gè)項(xiàng)目都引入了，這是我本地的路徑，如果項(xiàng)目中沒(méi)有引入，自己按照自己的路徑修改

?

（二）撰寫(xiě)HTML

　　這里面的內(nèi)容是從數(shù)據(jù)庫(kù)獲取出來(lái)的

<select id="parkID" name="parkID" class="selectpicker bla bla bli" type="text" multiple data-live-search="true" ></select>

?

（三）寫(xiě)js函數(shù)

　　　　　$(function() {$(".selectpicker").selectpicker({noneSelectedText : '請(qǐng)選擇' //默認(rèn)顯示內(nèi)容 });loadParkdata(); //執(zhí)行此函數(shù)，從后臺(tái)獲取數(shù)據(jù)，拼接成option標(biāo)簽，添加到select的里面//初始化刷新數(shù)據(jù)$(window).on('load', function() {$('.selectpicker').selectpicker('refresh');});});function loadParkdata(){$.ajax({url : "/module/parkmonthlyrent/listpark", //后臺(tái)controller中的請(qǐng)求路徑type : 'GET',async : false,datatype : 'json',success : function(data) {if(data){var parknames =[];for(var i=0,len=data.length;i<len;i++){var parkdata = data[i];
　　　　　　　　　　　　　　　　　//拼接成多個(gè)<option><option/>
　　　　　　　　　　　　　　　　　parknames.push('<option value="'+parkdata.parkID+'">'+parkdata.channelID+'</option>') }$("#parkID").html(parknames.join(' ')); //根據(jù)parkID(根據(jù)你自己的ID寫(xiě))填充到select標(biāo)簽中}},error : function() {alert('查詢(xún)停車(chē)場(chǎng)名稱(chēng)出錯(cuò)');}});}

?

（四）效果展示

　　

　　 模糊搜索

? ? ? ?? ? ?

?

?

?

?

---

?

?

　　　　　　希望接下來(lái)的日子一切順利。

　　　　　　　　

轉(zhuǎn)載于:https://www.cnblogs.com/misscai/p/10886853.html

總結(jié)

以上是生活随笔為你收集整理的下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中 用法详解...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。