jquery - Bootstrap 3 - 使用多重选择选择所有选项

Question

我有来自 Bootstrap 3 框架的以下多重选择字段:

<select class="selectpicker" multiple name="regions" id="regions">
    <option value="99">All regions</option>
    <option value="AC">AC</option>
    <option value="AL">AL</option>
    <option value="AP">AP</option>
</select>

及其 jQuery 代码:

$("#regions").change(function(){
    if($("option:selected:last",this).val() == 99){
        $('#regions option').prop('selected', true);
    } else{
        $('#regions option').prop('selected', false);
    }
});

问题是:选择“所有区域”选项时，多重选择不会更新为所选的所有选项。

Answer 1

如果您使用 bootstrap-select组件，两个选项:

<强>1。内置

添加

data-actions-box="true" 

到您在 html 中选择的标签。

如果您需要自定义标签:

$.fn.selectpicker.defaults = { 
  selectAllText: "All",
  deselectAllText: "None"
}

<强>2。手动

您可以选择/取消选择 html select 中的所有选项并刷新 bootstrap-select 组件:

$("#your-select option").attr("selected", *value)
$("#your-select").selectpicker("refresh") // must be already initialized
*value  = true | "selected" | false | null

注意:在我使用 bootstrap-select 和这种方法的测试中，我只能取消选择全部。当我尝试选择全部时，组件未更新。

https://github.com/silviomoreto/bootstrap-select/issues/825