JQuery向multi select多选框追加值时出现重复选项如何解决？

问题根因 #

你已经在Blade模板中通过@foreach循环将所有权限选项全部预渲染到了select下拉框中，编辑场景下用jQuery的append方法新增option的操作，等于把已经存在的权限选项重复插入到了下拉列表中，所以会出现重复条目，不需要新增option，只要给已存在的对应value的option设置选中状态即可。

修复方案 #

你用的是Select2多选组件，推荐直接用组件自带的批量赋值方法，代码最简单：

// 提取后端返回的权限ID组成数组
let selectedPerms = response.permissions.map(item => item.id);
// 直接给Select2赋值，会自动匹配对应选项设为选中，无需手动操作DOM
$("#permission").val(selectedPerms).trigger('change');

如果要手动遍历设置选中，代码如下：

// 先清空原有选中值，避免不同条目编辑的选中状态残留
$("#permission").val([]).trigger('change');
// 遍历匹配已有选项设置选中
$(response.permissions).each(function (i,value) {
  $("#permission option[value='"+value['id']+"']").prop('selected', true);
});
// 触发change事件让Select2更新渲染
$("#permission").trigger('change');

注意事项 #

如果模态框是新增、编辑复用的，建议加模态框关闭时的清空逻辑，避免新增场景携带上次编辑的选中值：

// 替换为你自己的模态框ID
$('#editModal').on('hidden.bs.modal', function () {
  $("#permission").val([]).trigger('change');
})

内容的提问来源于stack exchange，提问作者Ashq qash