单击某个项目可取消选择它

Question

有一个下拉多重选择，我想单击一个元素将其从选定的元素中删除。开箱即用的 selected.js 显然无法做到这一点，你如何修改它？

我尝试将标准函数绑定到元素上，但没有成功。请给我提示

$("body").on("click", ".result-selected", function() {
    let index = $(this).attr("data-option-array-index");
    let container = $(this).closest(".chosen-container");
    let select = container.prev();
    
    if ( select != null && select.hasClass("chosen-select") ) {
        console.log(index);
        select
            .find("option:eq(" + index + ")")
            .prop("selected", false);
        select.trigger("chosen:updated").trigger('chosen:open');
    }
});

Answer 1

在原始代码中，您在取消选择后触发了选择：打开。这可能并不总是按预期运行，因为如果取消选择时下拉列表关闭，则可能不需要立即打开它。在大多数情况下，您需要在进行更改后关闭下拉列表，而不是重新打开它。

1. 在选中的选定元素上绑定点击事件。
2. 在select元素中找到对应的选项。
3. 从该选项中删除选定的属性。
4. 更新所选下拉列表并触发必要的事件。

$("body").on("click", ".result-selected", function() {
    let index = $(this).attr("data-option-array-index"); // Get the index of the selected option
    let container = $(this).closest(".chosen-container"); // Find the container of the chosen dropdown
    let select = container.prev(); // Get the original select element
    
    if (select != null && select.hasClass("chosen-select")) {
        // Find the corresponding option element in the select by index
        let option = select.find("option").eq(index);
        
        if (option.length) {
            // Deselect the option (remove 'selected' attribute)
            option.prop("selected", false);
            
            // Trigger Chosen updates to refresh the UI
            select.trigger("chosen:updated");
            
            // Close the dropdown after deselecting
            select.trigger("chosen:close");
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>