如何基于其他Select2表单值动态设置Select2表单值？

问题根源 #

1. 你原代码仅针对固定ID #code-2 绑定联动事件，动态新增的行没有被绑定对应逻辑
2. ID设置逻辑错误：循环给所有.code/.name元素设置同一个ID，导致ID重复，无法正确定位元素
3. 仅设置Select2的val未触发change.select2事件，UI不会同步更新选中状态

修复后的完整代码 #

var addRow = 100;
let x = 1; // 初始行数，假设页面默认已有1行设备表单

$("#addDevice").click(function(){
    if(x >= addRow) return; // 超过添加上限直接返回

    // 构造新行HTML，用类代替重复ID（ID必须唯一）
    const newRowHtml = `
        <div class="row device-row">
            <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="form-group">
                    <label>მოწყობილობის ID</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-hashtag"></i></span>
                        </div>
                        {{ form.render("storageDeviceCode[]", ["class": "form-control select2 code" ]) }}
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="form-group">
                    <label>მოწყობილობის სახელი</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-hdd"></i></span>
                        </div>
                        {{ form.render("storageDeviceName[]", ["class": "form-control select2 name"]) }}
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2">
                <div class="form-group">
                    <label>რაოდენობა</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-cubes"></i></span>
                        </div>
                        {{ form.render("storageDeviceQuantity[]", ["class": "form-control quantity"]) }}
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 mt-2 d-flex justify-content-center align-items-center">
                <button type="button" class="btn btn-danger btn-sm removeDevice"><i class="fas fa-trash-alt fa-xs"></i></button>
            </div>
        </div>
    `;

    // 追加新行并获取当前新增的行元素
    const $newRow = $(newRowHtml).appendTo("#newRow");
    x++;

    // 初始化当前行的Select2组件
    $newRow.find('.select2').select2();

    // 获取当前行的两个Select2元素，绑定联动逻辑
    const $codeSelect = $newRow.find('.code');
    const $nameSelect = $newRow.find('.name');
    
    $codeSelect.on("select2:select", function(e) {
        $nameSelect.val(e.params.data.id).trigger('change.select2'); // 触发Select2 UI更新
    });
});

// 动态移除行的事件委托（移除按钮是动态生成的）
$("#newRow").on('click', '.removeDevice', function(){
    $(this).closest('.device-row').remove();
    x--;
});

// 初始化页面默认行的联动逻辑
$(document).ready(function(){
    $('.device-row').each(function(){
        const $codeSelect = $(this).find('.code');
        const $nameSelect = $(this).find('.name');
        $codeSelect.on("select2:select", function(e) {
            $nameSelect.val(e.params.data.id).trigger('change.select2');
        });
    });
});

关键修改点说明 #

1. 移除重复ID：用device-row类标识每一行，避免ID重复问题
2. 行内元素关联：通过当前行的DOM结构直接找到对应的Select2，无需依赖ID定位
3. 动态绑定事件：每新增一行后，立即给当前行的Select2绑定专属联动逻辑
4. UI同步更新：设置val后触发change.select2事件，确保Select2的选中状态显示正常
5. 移除事件委托：用事件委托处理动态生成的移除按钮点击事件

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