使用选择菜单删除和添加带有 AJAX 的选项

Question

在堆栈的帮助下，我创建了一个具有两个选择菜单（A + B）的表单。根据菜单 A 中的选项>菜单 B 中的选项将添加到特定的现有选项之间。为此，我使用以下$ ajax函数，如下所示

function fetch_new_options(val) {
    $.ajax({
        type: 'post',
        url: 'fetch_new_options.php',
        data: {
            get_selected_option_id: val
        },
        success: function (response) {
            console.log(response);
            elemToReplaceBefore = $("#select_values option[value = '--']");
            $(response).insertBefore(elemToReplace);
            //                        elemToReplaceBefore.remove();
        }
    });
}

它几乎有效，问题是每个新选项都被添加而不是替换。

Menu B
Option B1
Option B2
-----
Option Bxx
Option Bxx

但是当我更改菜单 A 并说新选项是 D1、D2 和 D3 时，它变成了

Menu B
Option B1
Option B2
New option C1
New option C2
New option D1
New option D2
New option D3
Option Bxx
Option Bxx

而不是

Menu B
Option B1
Option B2
New option D1
New option D2
New option D3
Option Bxx
Option Bxx

如何替换新选项而不仅仅是添加？.insertReplace存在吗？

我应该将类添加到菜单 B 选项元素并使用.replaceWith吗？

Answer 1

您必须

使用 $("#select_value option[value='foo']").remove(); 删除要删除的特定选项，就像您在代码elemToReplaceBefore.remove()中所做的那样，但如果要删除在发送 ajax 调用之前存在的所有值，这将始终删除带有value='--'的第一个选项$('#select_values').empty()