希望这可以帮助目前有这个问题的人！

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

问题是：当＆＃34;所有地区＆＃34;如果选择了该选项，则不会使用所有选项更新多重选择。

Answer 1

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

<强> 1。内置

添加

data-actions-box="true"

到html中的select标签。

如果您需要自定义标签：

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

<强> 2。手动

您可以选择/取消选择html中的所有选项并刷新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

Answer 2

希望这可以帮助目前有这个问题的人！

我不确定你究竟想要实现什么，如果我把它弄好了你想要选择全部如果用户选择第一个value=99并选择个人，如果他们选择其他人吗？

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

请参阅示例：https://jsfiddle.net/pwdu8wab/4/

Bootstrap 3 - 使用多个选择选择所有选项

2 个答案:

希望这可以帮助目前有这个问题的人！