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);