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

【问题标题】：Using a select menu to remove and add options with AJAX?使用选择菜单删除和添加 AJAX 选项？
【发布时间】：2017-11-06 12:01:06
【问题描述】：

在堆栈的帮助下，我创建了一个包含两个选择菜单 (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？

【问题讨论】：

有许多教程和 SO 问题来描述整个过程。
所以你打算替换但它正在被附加......我正确吗？
您要替换的选项的唯一 ID 是什么？或者只是没有身份证
对不起，我将我的问题编辑为“希望”让它更清楚一点
@MuhammadOmerAslam 我想我找到了一个解决方案，方法是删除文档准备好的选项 ` $(document).ready(function () { console.log("ready!"); // 触发 T&R $ ('#menuA').change(function () { $(".tr_new_option").remove(); ,

标签： jquery ajax select option

【解决方案1】：

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

【讨论】：

@muhammed，但是当我删除时，我没有选择器可以插入之前或之后？顺便说一句：我稍微编辑一下我的问题