bootstrap-select多选下拉框使用

1、需要引入的js及Demo下载链接：https://pan.baidu.com/s/1LzZjKsCqdt3p0q--o_wP8g   密码：vhyw

2、（1）引入js，貌似仅支持1.9后的jquery.js版本

        

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

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

      （2）给下拉选<select>标签

<select id='select' class="selectpicker" multiple>
                         
</select>

   添加属性：data-live-search="true"    添加搜索框

                     data-actions-box="true"    添加全选全部选按钮
                     data-style="btn-danger"    添加样式（还可以设为btn-primary；btn-info；btn-success；btn-warning）

        （3）初始化数据

    $(function(){
		//设置默认请选择全选全部选按钮名称
		$('#select').selectpicker({
			width : 300,//设置宽度
			selectedText: 'cat',
			header: 'Select a condiment',
			noneSelectedText: '请选择',
			deselectAllText: '全不选',//不知道为啥中文设置不成功
			selectAllText: '全选'//不知道为啥中文设置不成功
		});
		//初始化下拉选
		$("#select").html("<option value='1'>广州市</option>"+
               " <option value='2'>深圳市</option>"+
               " <option value='3'>珠海市</option>");
		$('#select').selectpicker('refresh');//相当于刷新数据，必须有  
		//选中事件
		$('#select').on('changed.bs.select',function(e){
			console.log(e)
		});
	})

      （4）获取选中的值

    //获取选中值
	function getValue(){
		var values_arr = $("#select").val();//以数组形式获取值
		var value_str = values_arr.join(",");//数组转字符串
		alert(value_str);
	}

      （5）设置选项值

    //设置选中值
	function setValue(){
		$('#select').selectpicker('val', ['1','2']);
	}

       （6）设置分组样式

    //设置为分组形势
	function setGroup(){
		$("#select").html("<optgroup label='广东'>"+
                "<option value='1'>广州</option>"+
                "<option value='2'>深圳</option>"+
                "<option value='3'>珠海</option>"+
          "</optgroup>"+   
          "<optgroup label='广西'>"+
                  "<option value='4'>南宁</option>"+
                  "<option value='5'>柳州</option>"+
                  "<option value='6'>桂林</option>"+
           "</optgroup>"+
           "<optgroup label='山东'>"+
                   "<option value='7'>烟台</option>"+
                   "<option value='8'>青岛</option>"+
                   "<option value='9'>济南</option>"+
             "</optgroup>");
		$('#select').selectpicker('refresh');//相当于刷新数据，必须有 
	}