下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中 用法详解

Posted 2021-12-01 misscai

今天收到了客户的需求，要求在新增停车场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];
                            parknames.push(‘<option value="‘+parkdata.parkID+‘">‘+parkdata.channelID+‘</option>‘)  //拼接成多个<option><option/>
                        }
                        $("#parkID").html(parknames.join(‘ ‘));    //根据parkID(根据你自己的ID写)填充到select标签中
                    }
                },
                error : function() {
                    alert(‘查询停车场名称出错‘);
                }
            });
        }

 

（四）效果展示

　　

　　 模糊搜索

            

 

 

 

 

---

 

 

　　　　　　希望接下来的日子一切顺利。