bootstrap-select下拉框使用方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LiyangBai/article/details/82584599

• HTML部分：

<label for="select"></label>
<select id="select" class="form-control selectpicker" data-live-search="true" multiple @change="getUser"></select>

• 引入JS文件

<link rel="stylesheet" type="text/css" href="./bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./bootstrap-select.min.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-select.min.js"></script>

• JS部分：

  $(".selectpicker").selectpicker({
  	noneSelectedText: "请选择用户"
  })
  
  //获取选中的option的value值
  getUser(){
  	this.userList = $("#select").selectpicker("val");
  }
  
  //动态添加option
  getAllUser(){
  	var _this = this;
  	this.$axios.get(url).then(function(res){
  		//渲染用户列表
  		for (var i = 0; i < res.data.userInfoList.length; i++) {
  			$("#select").append("<option value='"+res.data.userInfoList[i].userId+"'>"+res.data.userInfoList[i].userName+"</option>");
  		}
  		$(".selectpicker").selectpicker('refresh');  //刷新下拉列表
  		$(".selectpicker").selectpicker('render');   //强制重新渲染
  	}).catch(function(err){
  		console.log(err)
  	})
  }
  
  //取消多选
  $(".selectpicker").selectpicker('deselectAll');