bootstarp-select(1)：bootstarp-select基本使用_bootstrap-select 接口数据格式要求-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38357164/article/details/106401559

本文详细介绍如何在项目中引入并使用Bootstrap Select组件，包括基本用法、支持搜索功能、动态数据渲染、初始化设置及回显操作等关键步骤。通过具体代码示例，帮助读者快速掌握Bootstrap Select的配置与应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入文件，首先引入jquery和bootstarp的依赖文件，再接着引入bootstrap-select

 <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
  <link  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

2、使用：class="selectpicker"


  <select class="selectpicker  show-tick form-control">
    <option>四川</option>
    <option>江西</option>
    <option>湖北</option>
    <option>上海</option>
    <option>北京</option>
    <option>天津</option>
  </select>

3：支持结果搜索： data-live-search="true"

  <select id="cityList_add" name="cityCode"  class="selectpicker  show-tick form-control"   data-live-search="true"> </select>

4、动态数据渲染

1、在select标签里加入元素定位选择器id

2、动态数据组装，一般都是ajax请求后台的数据字典，返回拼接的形式为一般的option格式：<option value="xxx">text</option>

3、将拼装好的<option>追加select下即可

4、动态数据每次组装后需要刷新一下元素列表，防止数据字典变动影响数据正确性： $(id).selectpicker('refresh');

  success: function (res) {
                $(ele).empty();
                if(res.data.code==="ex0001"){
                    toastr.error(res.data.message,"异常！");
                    return false;
                }
                $.each(res.data.cityList,function(index,value){
                    let option=$("<option></option>").attr("value",value.code).text(value.name);
                    $(ele).append(option);
                });
                $(ele).selectpicker('refresh');
     }

5、初始化设置

$('.selectpicker').selectpicker({
    language: 'zh_CN',
    dropupAuto: false, // 设置下拉方向始终向下
    width:100，
    size: 4 //展示选项数量（下拉列表长度）
});

6、回显操作：

  var arr =result.data.adviserId.split(',');  //result.data.adviserId是选项option的value值
 $('#select_id').selectpicker('val',[arr]);

回到初始未选择的状态：

方式一:

function reset(){
  document.getElementById("select_id").options.selectedIndex=0;//回到初始状态
  $("#selectpicker_course").selectpicker('refresh');
}

方式二：

function reset(){
    ajax重新请求一边ajax数据
    $("#select_id").selectpicker('refresh');
}