Jquery 加载阵列数据时重置多个select2

我需要更新一个数组数据源。使用中的重置/清除技术不会清除选项；该控件在代码段中将它们组合为一、二、三、四。如何清除控件并重新初始化选项

$function{ var initialData=[{id:1，text:'one'}，{id:2，text:'two'}]； $test.select2{ 数据：初始化数据 }; $“更改”。单击函数{ var newData=[{id:3，text:'three'}，{id:4，text:'three'}]； $'test'.val[]；//尝试清除 $test.select2{ 数据：新数据 }; }; }; @导入url'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css';

---

更改当我运行AJAX请求并用新项目填充select2时，我就是这样做的：

var categoryGroups = response.data;
$.each(categoryGroups, function (key, categoryGroup) {
    $groupList.append(
        '<option value="' + categoryGroup.id + '">' +
            categoryGroup.name +
         '</option>'
    );
});

$groupList.change();

$groupList是select元素的选择器

更新：

另一种方法是执行以下操作：

$“测试”。为空

---

$'test'.select2{data:newData}

不幸的是，这在本机select2功能中是不可能的，必须手动完成

请参阅此GitHub问题：

本质上，您需要销毁Select2实例，然后通过重新初始化来重新填充它。下面的代码既快又脏，我相信有更好的编写方法：

$function{ var initialData=[{id:1，text:'one'}，{id:2，text:'two'}]； //缓存jquery对象的良好实践： var$test=$test； $test.select2{ allowClear:是的， 数据：初始化数据 }; $“更改”。单击函数{ var newData=[{id:3，text:'three'}，{id:4，text:'three'}]； //清除所选项目 $test.val.change； //销毁select2 $test.select2destroy； //从HTML中物理删除选项 $test.findoption.remove； //使用新数据重新初始化 $test.select2{ 数据：新数据 }; }; }; @导入url'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css';

---

change我不想附加到现有值；我想替换它们。另外，必须直接附加选项元素似乎是错误的；select2应该可以处理这个问题。尝试其他可能适用于您的案例的方法。我更新了我的答案。val.change方法只是清除所选的项，而不是将newData数组更改为[{3:'three'}，{4:'three'}]撤消我的向下投票和向上投票，因为空+重新初始化有效。就我个人而言，我发现重复编辑完全改变了答案是令人沮丧的。请考虑下一个答案。哇！令人惊讶的是，他们结束了这个问题。我也这么认为，考虑到评论的数量，这似乎是一个相当普遍的问题！尽管如此，修复非常容易完成。如果您打算在代码中反复使用目标对象，我建议您在传递目标对象的地方创建一个自己的函数。祝你好运是的，我刚刚接受了。我确实发现调用$test.empty，然后像您那样用新数据重新初始化它，似乎可以清除任何现有的选择和选项。是的，我想会的，只是太彻底了。虽然，有人会说我是在浪费。。。抢手货我正在工作，并没有花太多时间编写代码，但很高兴它能为您工作！