Bootstrap 多选：检查所有选项是否被选中的标志

Question

我正在使用引导多选插件来启用选择控件和多选的过滤。 我必须根据所选值加载另一个下拉列表，并且我使用了

onDropdownHide

做同样事情的事件

代码如下所示

$("#@param_name").multiselect({
    enableCaseInsensitiveFiltering: true,
    includeSelectAllOption: true,
    includeResetOption: true,
    includeResetDivider: true,
    resetText: "Reset all",
    selectAllValue: 'select-all-value',
    onDropdownHide: function (event) {                                              
        var allselected= ?????;   
        callTargetDropDownLoad(allselected);
    }
});

并且基于 allselected 变量，我必须编写一些自定义逻辑。但我没有看到任何方法来识别所有值是否在下拉列表中被选中并将其分配给

 allselected variable

Answer 1

您可以使用经典的:selected 选择器：

$('#\\@param_name option:selected')  // get all selected options

如果您需要检查是否选择了所有选项，则可以使用：

this.$ul.find('li.multiselect-all').is('.active');  // check if the selectall is selected

$("#\\@param_name").multiselect({
    enableCaseInsensitiveFiltering: true,
    includeSelectAllOption: true,
    includeResetOption: true,
    includeResetDivider: true,
    resetText: "Reset all",
    selectAllValue: 'select-all-value',
    onDropdownHide: function (event) {
        var isMultiSelected = this.$ul.find('li.multiselect-all').is('.active');
console.log('multiselect ---> ' + isMultiSelected );
        var allselected= $('#\\@param_name option:selected');
        allselected.each((a,b) => console.log(b.textContent));
        callTargetDropDownLoad(allselected);
    }
});

function callTargetDropDownLoad(a) {
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>


<select id="@param_name" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>