一、前因

公司的项目早就上线了，现在正处于逐步的优化当中，其中有一个就是关于下拉框的优化。因为随着公司业务的开展，进驻的经销商已经有上百家了，而普通的下拉框对选取某一个经销商着实有一定的效率低下，因此需要优化。由于网上大多数都是JQuery与boorstrap-select的搭配应用，与angularjs之间的搭配较少，因此想着写一篇拙劣的指南，如有错误，还请不吝指教！

转载请注明出处！

优化之前的样子

优化之前的html代码：

<select ng-disabled="isDisabledBranch" id="branchId" class="form-control " ng-model="vm.branchId"
ng-options="item.branchCode as (item.branchCode+'-'+item.branchName) for item in branchList" >
<option value="">请选择经销商</option>
</select>

优化之后的样子——带有模糊搜索筛查的功能。

优化之后的html代码：

<select ng-disabled="isDisabledBranch" id="branchId" class="form-control selectpicker" data-live-search="true"
ng-model="vm.branchId"
ng-options="item.branchCode as (item.branchCode+'-'+item.branchName) for item in branchList" >
<option value="">请选择经销商</option>
</select>

二、实现步骤

1.下载bootstrap-select插件

官网：http://silviomoreto.github.io/bootstrap-select/（由于官网大多数情况下是打不开的，本人都是在某一时刻突然打开了官网才下下来的。）

鉴于以上情况，给大家贴一个百度网盘的：https://pan.baidu.com/s/1fvpVAtd4JAAH7xeQuQNiTg 密码：yrsh

2.需要的引用（这些都是必须的，其他的就自己看着办了）

<link rel="stylesheet" href="dist/test/css/bootstrap.min.css">(3.3.4版本。3.3.6的版本会有冲突，下拉框无法正常显示。慎用！)
<link rel="stylesheet" href="dist/test/css/bootstrap-select.css">(bootstrap-select-1.12.4)
<script src="dist/test/js/jquery.js"></script>(都可以)
<script src="dist/test/js/bootstrap.min.js"></script>
<script src="dist/test/js/bootstrap-select.js"></script>
<script src="angular/angular.js"></script>(1.6.*版本，比较落后了。)

3.实现

做完以上的，就可以直接使用bootstrap-select了。

三、关于bootstrap-select的属性介绍

1.selectpicker

只添加selectpicker这个class属性值，可实现普通的下拉框功能，没啥区别。title的作用与palcehoder一样。

<select class="selectpicker" title="请选择城市名称">
<option>香港xg</option>
<option>重庆cq</option>
<option>北京bj</option>
<option>上海sh</option>
<option>深圳sz</option>
</select>

2.multiple

selectpicker和multiple属性的搭配使用可实现多选

<select class="selectpicker" multiple>
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>

3.data-live-search="true"

这个属性的默认值是false,作用是打开模糊筛查搜索框。

普通实现的html代码

<select class="selectpicker" multiple data-live-search="true">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>

效果：

选项分组

<select class="form-control selectpicker" data-live-search="true" multiple>
<optgroup label="广东省">
<option value="1">广州市</option>
<option value="2">深圳市</option>
<option value="3">珠海市</option>
</optgroup>
<optgroup label="广西">
<option value="1">南宁市</option>
<option value="2">柳州</option>
<option value="3">桂林市</option>
</optgroup>
<optgroup label="山东">
<option value="1">烟台</option>
<option value="2">青岛</option>
<option value="3">济南</option>
</optgroup>
</select>

效果：

4.data-max-options

这个属性表示最多可选几个，是需要搭配multiple属性一起使用的，用法：data-max-options=“2”，表示最多选两个。

5.data-selected-text-format

缩略模式，用法：data-selected-text-format="count > 3"，当选中值大于3个的时候只显示选中项的个数，注意这个属性只对多选生效。

效果：

6.data-style

表示默认选中样式，这个我没试过，用法：data-style="btn-primary"，属性值就是bootstrap的按钮样式。

7.data-size

data-size="6",表示下拉框显示的下拉列表数量。

8.data-dropup-auto=""

data-dropup-auto="false"，表示下拉框默认向下展开；"true"，表示下拉框默认向下展开；"auto"，表示下拉框根据页面尺寸自动向下或向上展开，"auto"是data-dropup-auto的默认值。

9.其他用法

全选：$('.selectpicker').selectpicker('selectAll');

反选：$('.selectpicker').selectpicker('deselectAll');

适应手机模式：$('.selectpicker').selectpicker('mobile');

效果：

还有其他多种玩法，等以后有时间，并且自己玩过了再更（不过估计不得了）

以上图片来源：https://www.cnblogs.com/landeanfen/p/7457283.html

四，与AngularJs的搭配使用（脱坑必看）

1.脱坑第一步

因为angularjs的下拉框，几乎都不会显示的在html文件中写出<option value="1">XXX</option>

大多数情况下，都是采用的ng-options指令，循环出选项，并装填到<option value="">。。。</option>标签中。

此时再使用上诉的方式在页面显示的效果为：

即下拉框无法显示出选项，但实际上，按下F12去查看时，又明显的有这些选项值，只是页面无法展示。

脱坑方案第一步

在页面中添加Js：

$(function () {
//此两句代码必不可少，一句都不能缺，先后顺序也不能换，这是血的教训啊。
$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('render');
});

但是这种做法，只有在编译之后第一次进入页面的时候生效，一旦刷新之后就失效了。具体原因，是涉及到了angularjs的异步加载的问题。

脱坑方案第二步

将上面的代码，放在下拉框遍历的集合之前执行，eg：

ng-options="item.branchCode as (item.branchCode+'-'+item.branchName) for item in branchList"

即，需要在branchList加载完成之前执行。此时就需要将$('.selectpicker').selectpicker('refresh'); $('.selectpicker').selectpicker('render');放到对应的Controller中，则能完美解决问题。

代码：

SysBranchService.getEffectDealerList().then(function (response) {
$(function () {
$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('render');
});
$scope.branchList = response;
});

注：一定不能使用$object此种方法进行异步加载。即：$scope.branchList = SysBranchService.getEffectDealerList().$object;

then方法的加载机制是必须等待获取完所有返回值之后才会进行下一步操作，而$object是一边执行下面的操作，一边等待返回值。因此也会造成下拉框的选项时有时无。

2.脱坑第二步

警告：如果遇到表单验证required，ng-required，则required，ng-required将会失效！

因此若是需要表单验证的话，千万不要使用此种方式，需要另辟蹊径。

另外，若有朋友解决了这个问题，还请不吝赐教，在下先谢了。

3.脱坑第三步

在angularjs中，可能会遇到选择之后数据不能回显，但实际上数据是进入了数据库的。此时需要进行初始化赋值，即当页面需要的数据全部加载完之后，给下拉框赋初始值。

如下所示：

$(function () {

//从数据库查回来的值
var valArea='string:'+$scope.item.sysBranch.areaId;
var valPost='string:'+$scope.item.sysBranch.parentId;
var valBank='string:'+$scope.item.sysBranchDealer.bankId;

//给下拉框赋初始值 .selectpicker:eq(0)表示该页面或者该表单的第几个使用了第几个selectpicker属性的input标签
$('.selectpicker:eq(0)').selectpicker('val',valArea);
$('.selectpicker:eq(1)').selectpicker('val',valPost);
$('.selectpicker:eq(2)').selectpicker('val',valBank);
$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('render');
});

文章转自：https://blog.csdn.net/ai_ting_java/article/details/81557586

bootstrap-select插件angularjs爬坑相关推荐

bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
bootstrap select多选的change事件
bootstrap select的插件多选会自己生成新的DOM,所以绑定在原来select上的change事件不会触发. //bootstrap select插件多选的change事件 $('#fc_ ...
ubuntu20安装gdb插件gef的爬坑记录
0x00 环境 ubuntu20.04.2.0 0x01 踩坑过程 1.按照官网教程安装官网地址:https://github.com/hugsy/gef 按照官网提示安装,wget报TLS连接错误 ...
【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结
[魅族Pro7]--BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式 ...
【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...
Espressif IDF for VSCode 爬坑之路二：ESP32 的 JTAG 调试（OpenOCD GDB）
今天我们来探索如何在 Espressif IDF 插件里进行 JTAG 调试.如果还未成功安装与入门 Espressif IDF for VSCode,可以先参考 Espressif IDF for ...
Nuxt(安装部署)爬坑指南
Nuxt.js使用详细说明这篇文章主要向大家介绍Nuxt爬坑,主要内容包括基础应用.实用技巧.原理机制等方面,希望对大家有所帮助. https://www.shangmayuan.com/a/dcd ...
全局安装nuxt_Nuxt爬坑
nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以 ...
Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

bootstrap-select插件angularjs爬坑