bootstrap-select多选传递到后台以及后台传递到前台绑定

• bootstrap-select介绍
• bootstrap-select多选传递数据到后台
• bootstrap-select多选后台传递数据到前台绑定

bootstrap-select介绍

bootstrap-select是最近常用的简洁方便的下拉列表，开源地址：https://github.com/silviomoreto/bootstrap-select

如果想要运行tests目录下demo的话，如果不能正常运行，请尝试使用最新的jquery地址

bootstrap-select多选传递数据到后台

但将前台数据利用form表单传递的时候，默认只会传递最后一个值

<select class="selectpicker form-control" id="select_id" data-live-search="true" title="Select a number" data-hide-disabled="true" data-actions-box="true" multiple name="select_name">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</select>
           

如上图所示，如果用form传递，并不会将Option 0和Option 1两个值都传递到后台，只会传递Option 1所对应的value，如果还想依旧使用form进行传递，请为该控件绑定一个change事件，代码如下，其中select_id控件名称，input_select_id为一个隐藏的input控件，用来记录选中或取消的value，把原来name的名字复制给隐藏的input控件即可。

$('#select_id').on('changed.bs.select', function(e) {
     $("#input_select_id").val($(this).val());
 });
           

html代码如下（注意name的变化）

<select class="selectpicker form-control" id="select_id" data-live-search="true" title="Select a number" data-hide-disabled="true" data-actions-box="true" multiple >
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</select>
<input type="text" id="input_select_id" style="display:none;" name="select_name"/>

           

bootstrap-select多选后台传递数据到前台绑定

假如传递回的数据为response_data = “1,2”，直接进行绑定会失败，需要将其转为数组：

$("#select_id").val(response_data.split(","));
$("#input_select_id").val(response_data);