Question

借助堆栈，我创建了一个包含两个选择菜单（A + B）的表单。基于菜单A中的选项 - ＆gt;菜单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()中一样，但这将始终删除value='--'的第一个选项如果要在发送ajax调用$('#select_values').empty()

之前删除所有存在的值

使用选择菜单删除和添加AJAX选项？

1 个答案: