使用选择菜单删除和添加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()