下拉插件 (帶搜索) 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('查詢停車場名稱出錯'); } }); }

 

（四）效果展示

　　

　　 模糊搜索

            

 

 

 

 

---

 

 

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