删除多个 select 选项并替换为新选项

Question

我有一个 select 标签，例如：

<span id="reportProjectSelector">
    <span>Reporting Project:</span>
    <select id="reportProjectDropdown" onChange="loadChartWithData();" multiple="multiple"></select>
</span>

和

$(function() {
    $('#reportProjectDropdown_${widgetId}').multiselect({
        includeSelectAllOption: true
    });
});

这里我有多个其他下拉列表的下拉链，它们是 'reportProjectDropdown' 的父级。为简单起见，我们只考虑一个 'Project'。所以现在我们有 'Projects'，在更改时触发 'Reporting Projects' 过滤器。目前 Reporting 项目过滤器不会更改和替换新值（基本上是 null 或没有值，它们被下拉列表中的 'No Reporting Projects' 之类的值替换）

我曾尝试删除以前的值，但没有成功。这是我期望的功能。

function setDependentProjects (data, widgetId) {
    $('#reportProjectDropdown').find('option').remove().end();

    if(jQuery.isEmptyObject(data)) {
        let newOption = new Option("No Projects", 0, true, true);
        $('#reportProjectDropdown').append(newOption);
    } else {
        let selected = true;
        for(let key in data) {
            selected = "${defaultDependentProject}" == data[key];
            let newOption = new Option(data[key], key, selected, selected);
            $('#reportProjectDropdown').append(newOption);
            selected = false;
        }
    }

    loadChartWithData_${widgetId}(); //renders data as per the previous filters
}

我是不是遗漏了什么或删除了不正确的元素？

Answer 1

您需要在每次更改后刷新 jQuery 多选实例。您可以使用 $('#reportProjectDropdown').multiSelect('refresh');

另请参阅文档：jQuery multiselect

删除多个 select 选项并替换为新选项

Removing multiple select options and replace with new ones

javascript

jquery

multi-select