我正在尝试创建带有选项组和选项的动态select2下拉列表。选项组中必须有动态数量的选项。

我遇到的问题是如何删除选项组及其所有选项，然后使用相同的标签和ID重新添加相同的选项组，但现在在jquery中使用不同的选项。

当选项组的选项应该更改时，这是我每次更改都会调用的函数：

function EmptyDropDowns() {
    $("[id$=ddlOfficeaccount] optgroup").remove();
    $("[id$=ddlOfficeaccount]").append('<optgroup id="Offices" label="Offices"></optgroup>');
    $("[id$=Offices]").append($("<option></option>").text("- All Offices -").val("0"));
}

，然后在其他选项中填充组选项：

 if (Offices.length > 0) {
        for (var i in result.Offices) {
            $("[id$=Offices]").append($("<option></option>").text(result.Offices[i]).val(result.Offices[i]));
        }
    }

这仅在第一次时有效，创建带有选项组Offices的Select2下拉列表，并在其中具有X个office。但是当需要重新加载时，此代码：

 $("[id$=ddlOfficeaccount] optgroup").remove();
 $("[id$=ddlOfficeaccount]").append('<optgroup id="Offices" label="Offices"></optgroup>');

重新添加相同的选项组，即使该选项组在DOM中实际上不再存在。

在重新添加$（“ [id $ = Offices]”）之前是否可以清除它？我需要将其与相同的元素（具有相同的ID），之后再将组选项作为所选选项的父项进行检查。