Flask WTF级联下拉框经jquery.repeater克隆后失效求助

问题核心原因 #

1. 全局dropdown变量仅绑定页面加载时的第一组下拉框，克隆后的新元素触发级联逻辑时，仍操作初始的第一个ISIN下拉框，而非当前行的对应控件
2. 克隆后的Select2控件初始化逻辑错误，未正确绑定到新生成的元素上
3. 冗余的ISIN下拉框change监听无意义，反而会干扰正常逻辑

完整修复代码及步骤 #

1. 重构级联核心函数updateISIN #

移除全局dropdown变量，改为基于当前触发事件的下拉框定位对应行的ISIN控件：

var CascadingFormRepeater = function () {
    var form;

    // 重构updateISIN，接收当前触发事件的name下拉框元素
    function updateISIN($nameSelect) {
        // 定位当前行的ISIN下拉框
        const $isinSelect = $nameSelect.closest('.form-group[data-repeater-item]').find('.isin');
        const send = {
            tbondname: $nameSelect.val()
        };

        $isinSelect.attr('disabled', 'disabled').empty();
        $.getJSON("isinselect", send, function(data) {
            data.forEach(function(item) {
                $isinSelect.append(
                    $('<option>', {
                        value: item[0],
                        text: item[1]
                    })
                );
            });
            $isinSelect.removeAttr('disabled');
            // 重新初始化Select2，确保新选项生效
            $isinSelect.select2("destroy").select2({
                minimumResultsForSearch: -1,
                placeholder: "Select a variation"
            });
        });
    }

2. 修正事件监听逻辑 #

仅保留name下拉框的事件监听，并传递当前元素给updateISIN：

// 事件监听：name下拉框变化
    $(document).on('change', '.name', function() {
        updateISIN($(this));
    });

    // 移除无意义的isin下拉框change监听

3. 修复repeater的show回调逻辑 #

确保新克隆的元素正确初始化Select2并绑定逻辑：

const initFormRepeater = () => {
        $('#kt_ecommerce_add_product_options').repeater({
            isFirstItemUndeletable: true,
            initEmpty: false,
            defaultValues: {
                'text-input': 'foo'
            },
            show: function () {
                const $item = $(this);
                $item.slideDown();

                // 初始化当前新行的所有Select2控件
                $item.find('.name, .isin').each(function() {
                    if (!$(this).hasClass("select2-hidden-accessible")) {
                        $(this).select2({
                            minimumResultsForSearch: -1,
                            placeholder: "Select a variation"
                        });
                    }
                });

                // 确保新行的ISIN下拉框初始可用
                $item.find('.isin').removeAttr('disabled');
            },
            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);
            },
        });
    }

4. 修正全局Select2初始化函数 #

const initConditionsSelect2 = () => {
        // 直接定位所有需要初始化的select元素
        const allSelects = document.querySelectorAll('.name, .isin');
        allSelects.forEach(select => {
            if (!$(select).hasClass("select2-hidden-accessible")) {
                $(select).select2({
                    minimumResultsForSearch: -1,
                    placeholder: "Select a variation"
                });
            }
        });
    }

5. 调整页面初始化逻辑 #

移除全局updateISIN()调用，改为初始化后触发第一行的change事件加载初始数据：

// Public methods
    return {
        init: function(element) {
            form = document.querySelector('#kt_invoice_form');
            initFormRepeater();
            initConditionsSelect2();
            // 触发第一行name下拉框的change事件，加载初始ISIN选项
            $('.name').first().trigger('change');
        }
    };
}();

KTUtil.onDOMContentLoaded(function () {
    CascadingFormRepeater.init();
});

关键优化点说明 #

• 所有操作基于当前行的DOM元素，彻底摆脱全局变量依赖，确保每一行级联逻辑独立
• 更新ISIN选项后强制重新初始化Select2，解决新选项不显示的问题
• 移除冗余的ISIN下拉框监听，避免无意义的重复请求
• 统一Select2初始化逻辑，确保原生元素和克隆元素的行为一致

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