Question

我正在使用bootstrap multiselect插件来启用对选择控件和多重选择的过滤。我必须根据选择的值加载另一个下拉菜单，并且使用了

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 variable

Answer 1

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

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>

public showForm = false;

this.getDataService(param).subscribe((data) => {
    // All your logic here
    this.showForm = true;
}

Bootstrap multi select：标记以检查是否选择了所有选项

1 个答案: