bootstrap select

官方下载地址

https://developer.snapappointments.com/bootstrap-select/

 

需求现在需要下拉框，并且在下拉框上能输入文字搜索。

因为前端框架使用的时bootstrap所以有限考虑与bootstrap有关的前端插件。

最后选中bootstrap-select。

 

使用

<link href="../bootstrap/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />

<script src="../bootstrap/bootstrap-select/bootstrap-select.min.js"></script>

带搜索框的

<select class="selectpicker" data-live-search="true">

                                          <option>四川(sichuan)</option>

                                       <option>江西(jiangxi)</option>

                                       <option>湖北(hubei)</option>

                                       <option>上海(shanghai)</option>

                                       <option>北京(beijing)</option>

                                       <option>河北(hebei)</option>

                                          </select>

不带搜索框的

<select class="form-control" data-live-search="true" >

                                       <option>四川(sichuan)</option>

                                       <option>江西(jiangxi)</option>

                                       <option>湖北(hubei)</option>

                                       <option>上海(shanghai)</option>

                                       <option>北京(beijing)</option>

                                       <option>河北(hebei)</option>

                                     </select>

 

bootstrap-select长度失真

调试chrom浏览器发现bootstrap的css样式导致出现问题

解决方法：在jsp页面重新定义冲突的样式，然后给它合适的height

<style type="text/css">

       button,

       input,

       optgroup,

       select,

       textarea {

              height:30px;

         margin: 0;

         font: inherit;

         color: inherit;

       }

       </style>

 

bootstrap-select 在model中不显示

查找原因后是得有两步refresh和render操作，必不可少

<select id='name' class="form-control selectpicker"  data-live-search="true">

              <option>四川(sichuan)</option>

              <option>江西(jiangxi)</option>

              <option>湖北(hubei)</option>

              <option>上海(shanghai)</option>

              <option>北京(beijing)</option>

              option>河北(hebei)</option>

       </select>

        // 缺一不可

        $('#name').selectpicker('refresh');

        $('#name').selectpicker('render');