下拉插件 (帶搜索) Bootstrap-select 從后臺獲取數據填充到select的 option中 用法詳解...

今天收到了客戶的需求，要求在新增停車場ID的時候要從數據庫查出來對應的停車場名稱然后顯示在界面上。保存的時候按照停車場ID進行保存。

自己首先把后臺的部分寫完了，測試了接口數據。成功的拿到了ajax數據。

接下來，自己用了select下拉標簽和js函數進行填充后臺傳過來的數據。

經過自己的不斷百度和參考別人的博客，試了很多次終于成功的調試出了想要的結果。 特來博客記錄一下，也分享一下開心的心情。

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

　　樣式文件和JS下載放到本地最好，因為放到本地自己可以修改一些東西。

　　在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應該每個項目都引入了，這是我本地的路徑，如果項目中沒有引入，自己按照自己的路徑修改

?

（二）撰寫HTML

　　這里面的內容是從數據庫獲取出來的

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

?

（三）寫js函數

　　　　　$(function() {$(".selectpicker").selectpicker({noneSelectedText : '請選擇'    //默認顯示內容
            });loadParkdata();    //執行此函數，從后臺獲取數據，拼接成option標簽，添加到select的里面//初始化刷新數據$(window).on('load', function() {$('.selectpicker').selectpicker('refresh');});});function loadParkdata(){$.ajax({url : "/module/parkmonthlyrent/listpark",    //后臺controller中的請求路徑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];
　　　　　　　　　　　　　　　　　//拼接成多個<option><option/>
　　　　　　　　　　　　　　　　　parknames.push('<option value="'+parkdata.parkID+'">'+parkdata.channelID+'</option>') 

                       }$("#parkID").html(parknames.join(' '));    //根據parkID(根據你自己的ID寫)填充到select標簽中}},error : function() {alert('查詢停車場名稱出錯');}});}

?

（四）效果展示

　　

　　 模糊搜索

? ? ? ?? ? ?

?

?

?

?

---

?

?

　　　　　　希望接下來的日子一切順利。