在ASP.NET MVC Core动态表格行中启用jQuery Select2功能

核心原因 #

页面加载时初始化的Select2仅绑定了当时存在的DOM元素，动态添加的新行下拉框未被绑定Select2的事件与功能，仅继承了样式。

具体解决步骤 #

1. 封装Select2初始化函数
   将Select2的初始化逻辑抽离为可复用函数，方便动态添加行后调用，同时避免重复绑定：

// 初始化Select2的通用函数
function initAccountSelect2() {
    // 先销毁已存在的Select2实例，防止重复绑定导致的异常
    $('.account-select').select2('destroy').select2({
        data: @Html.Raw(Json.Serialize(ViewBag.accountList)),
        placeholder: "搜索选择账户",
        allowClear: true,
        width: '100%'
    });
}

// 页面加载时初始化静态行的Select2
$(document).ready(function() {
    initAccountSelect2();
});

2. 动态添加行后调用初始化函数
   在动态生成新行的代码中，添加完行后立即调用上述函数，为新行的下拉框绑定Select2：

// 示例：点击按钮添加新行
$('#add-detail-row').click(function() {
    // 获取当前详情行的数量，生成符合模型绑定的索引
    var rowIndex = $('.transaction-detail-row').length;
    
    // 构建新行HTML，注意name属性需遵循ASP.NET MVC模型绑定规则
    var newRowHtml = `
        <tr class="transaction-detail-row">
            <td>
                <select name="transactionDetails[${rowIndex}].AccountId" class="form-control account-select"></select>
            </td>
            <!-- 其他详情字段的输入框 -->
            <td><button type="button" class="btn btn-sm btn-danger remove-row">删除</button></td>
        </tr>
    `;
    
    // 将新行追加到表格
    $('#transaction-details-table tbody').append(newRowHtml);
    
    // 初始化新行的Select2
    initAccountSelect2();
});

3. 确保静态行的下拉框统一Class
   静态行中生成的account_id下拉框需要添加与动态行一致的account-select类，让初始化函数能统一处理：

@for (int i = 0; i < Model.transactionDetails.Count; i++)
{
    <tr class="transaction-detail-row">
        <td>
            @Html.DropDownListFor(m => m.transactionDetails[i].AccountId, new SelectList(ViewBag.accountList, "Value", "Text"), "选择账户", new { @class = "form-control account-select" })
        </td>
        <!-- 其他字段 -->
    </tr>
}

额外注意事项 #

• 动态行的name属性必须符合transactionDetails[index].AccountId格式，否则ASP.NET MVC无法正确绑定到集合模型。
• 避免使用全局的表单解绑操作，针对具体的Select2元素进行销毁/初始化，防止影响其他表单组件。

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