简体   繁体   中英

Limit the number of selections in easyui combobox

I have easyui combobox that is multi select. I am putting a limit on the number of items that can be selected so if you try to select more than the limit, it alerts the user and doesn't allow the item to be selected. This is my code.

$("#assessment_content_items_select_standards").combobox({
        data: $rootScope.assessmentItemsFilters.selectedStandards,
        valueField: 'value',
        textField: 'label',
        multiple: true,           
        onSelect: function (standard)
        {
            var selectedStandardsCount = 0;
            angular.forEach($rootScope.assessmentItemsFilters.selectedStandards, function (stan) {
                if (stan.selected == true) {
                    selectedStandardsCount++;
                }
            });

            if (selectedStandardsCount >= 25) {
                alert("You have reached the maximum selected standards allowed of 25");
            }
            else {
                standard.selected = true;
            }
        },
        onUnselect: function (standard) {
            standard.selected = false;
        }                       
    });

In the onSelect method I get the selected count and if it's more that 25 it just does an alert and it doesn't set selected to true for that selection.

The problem I'm having is that the UI still shows the item as selected even though the data shows as selected: false. I've tried the following to unselect but I see no difference.

standard.selected = false
$("#assessment_content_items_select_standards").combobox('unselect', standard);

My question is how do I stop options from being selected or is there a better way to put a limit on the dropdown?

Try this one:

$('#assessment_content_items_select_standards').combobox({
    onSelect: function (standard) {
        var count = $("div.combobox-item-selected").length;
        if (count > 25) {
            alert("You can only choose 25."); 
            $('#assessment_content_items_select_standards').combobox('unselect', standard. value);
        }
    }
});

Reference Documentation

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM