Bootstrap multi select: флаг, чтобы проверить, все опции выбраны или нет - PullRequest
Новая
       7

Bootstrap multi select: флаг, чтобы проверить, все опции выбраны или нет

0 голосов
/ 10 сентября 2018

Я использую плагин bootstrap multiselect, чтобы включить фильтрацию элемента управления select и множественного выбора.Мне нужно загрузить еще одно раскрывающееся меню на основе выбранных значений, и я использовал событие

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

1 Ответ

0 голосов
/ 10 сентября 2018

Вы можете использовать классический : выбранный селектор: 

$('#\\@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>
...