如何解决多次打开编辑模态框时AJAX加载select选项重复循环的问题

下拉选项重复的核心原因是：每次触发编辑按钮打开模态框时，你都是直接向#product_plan_edit下拉框追加新的option选项，但没有清空上一次打开模态框时已经渲染过的旧选项，多次打开就会叠加多份重复选项。

修复步骤 #

• 在循环渲染option之前，先清空下拉框的原有内容，同时可以简化选中逻辑，不需要额外给option加id属性再做dom查询，生成option时直接判断设置选中状态即可。

修复后的前端JS代码 #

// Function for edit modal plan schedule
$('body').on('click', '.editPlanSchedule', function() {
    var Item_id = $(this).data('id');
    $.get("/quotation/getEditPlanSchedule" + '/' + Item_id, function(data) {
        console.log(data['product_plan']);
        $('.modal-title-edit').html("Edit Plan Schedule Item");
        $('#saveBtn').val("Update");
        $('#updatePlanSchedule').modal('show');
        $('#id').val(data['data'].id);
        $('#qno').val(data['data'].qno);
        $('#b_amount').val(data['data'].b_amount);
        
        // 先清空原有选项，避免重复
        $('#product_plan_edit').empty();

        data['product_plan'].forEach(function(item, index) {
            // 生成option时直接判断是否选中，简化逻辑
            $('#product_plan_edit').append($('<option>', {
                value: item.productplanID,
                text: item.productplanID,
                selected: data['data'].product_plan == item.productplanID
            }));
        });
    })
});

额外优化建议 #

你可以监听模态框的关闭事件，在模态框关闭时统一清空所有表单内容、下拉选项，避免其他表单字段也出现旧值残留的问题：

$('#updatePlanSchedule').on('hidden.bs.modal', function () {
    // 重置表单所有内容
    $(this).find('form')[0].reset();
    // 清空下拉选项
    $('#product_plan_edit').empty();
})

内容的提问来源于stack exchange，提问作者Fathul Muiin