Bootstrap-select的用法及遇到的问题

一、使用

1、通过selectpicker类直接初始化Bootstrap-select

<select class="selectpicker">
	<option value="1" selected>1</option>
	<option value="2" >2</option>
	<option value="3" >3</option>
</select>

效果如图:

2、选择带有optgroup的框

<select class="selectpicker">
        <optgroup label="数字">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </optgroup>
        <optgroup label="Camping">
            <option>字母</option>
            <option>a</option>
            <option>b</option>
        </optgroup>
    </select>

效果图：

3、多选

multiple 设置是否可以多选，data-max-options设置多选的最大数量。

<select class="selectpicker" multiple data-max-options="2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
   </select>

效果图：

4、即时搜索

data-live-search设置是否开启搜索，data-tokens是将关键字添加到选项中，这样搜索first或者one时也可以搜索到1这个选项。

<select class="selectpicker" data-live-search="true">
        <option data-tokens="first,one">1</option>
        <option>2</option>
        <option>3</option>
    </select>

效果图

二、遇到的问题

问题描述：使用多选功能，当选择多个时，通过form表单提交到接口方法中时，获取到的数据只能获取到一个选项的数据，而非全部的选中的选项数据。
解决办法：修改name，问题解决前代码：

<select name="industry_type" id="industry_type" class="selectpicker" multiple title="选择一个或多个行业分类" >

修改后：

<select name="industry_type[]" id="industry_type" class="selectpicker" multiple title="选择一个或多个行业分类" >

修改之后接口发方法中获取到的数据就不再是一个数据而是选中选项的数据的数组。