Bootstrap Selectpicker克隆表格行异常问题求助

问题原因 #

Bootstrap Selectpicker初始化后会将原始<select>元素隐藏，生成一套自定义的下拉UI DOM结构。直接克隆已初始化的表格行时，复制的是生成后的UI元素而非原始<select>，导致新行丢失下拉选项，同时保留原行的选中值。

解决思路 #

操作原始未初始化的<select>元素进行克隆，克隆完成后重新初始化Selectpicker，并清空新行的选中状态。推荐使用隐藏模板行的方式，避免破坏已初始化的行。

实现代码 #

1. HTML结构（含模板行） #

<table class="table">
    <thead>
        <tr>
            <th>Opponent</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="rows-container">
        <!-- 初始行 -->
        <tr>
            <td>
                <select class="form-control opponent-selectpicker" data-live-search="true" name="opponents[]">
                    @foreach($opponents as $opponent)
                        <option value="{{ $opponent->id }}">{{ $opponent->name }}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <button type="button" class="btn btn-danger remove-row">Remove</button>
            </td>
        </tr>
    </tbody>
</table>

<!-- 隐藏的模板行，用于克隆 -->
<tr class="d-none template-row">
    <td>
        <select class="form-control opponent-selectpicker" data-live-search="true" name="opponents[]">
            @foreach($opponents as $opponent)
                <option value="{{ $opponent->id }}">{{ $opponent->name }}</option>
            @endforeach
        </select>
    </td>
    <td>
        <button type="button" class="btn btn-danger remove-row">Remove</button>
    </td>
</tr>

<button type="button" id="add-row-btn" class="btn btn-primary">Add Row</button>

2. JavaScript代码 #

// 初始化页面上所有Selectpicker
$(document).ready(function() {
    $('.opponent-selectpicker').selectpicker();

    // 添加行按钮事件
    $('#add-row-btn').on('click', function() {
        // 克隆模板行并移除隐藏类
        const newRow = $('.template-row').clone().removeClass('d-none');
        
        // 清空新行下拉框的选中值
        newRow.find('.opponent-selectpicker').val('');
        
        // 将新行添加到表格
        $('#rows-container').append(newRow);
        
        // 初始化新行的Selectpicker
        newRow.find('.opponent-selectpicker').selectpicker();
    });

    // 删除行事件（委托绑定，支持动态生成的按钮）
    $(document).on('click', '.remove-row', function() {
        $(this).closest('tr').remove();
    });
});

3. 备选方案（无模板行，克隆现有行） #

如果无法使用模板行，可先销毁现有行的Selectpicker，再克隆原始<select>元素：

$('#add-row-btn').on('click', function() {
    const lastRow = $('#rows-container tr:last');
    
    // 销毁最后一行的Selectpicker，恢复原始select元素
    lastRow.find('.opponent-selectpicker').selectpicker('destroy');
    
    // 克隆行
    const newRow = lastRow.clone();
    
    // 清空新行的选中值
    newRow.find('.opponent-selectpicker').val('');
    
    // 添加新行到表格
    $('#rows-container').append(newRow);
    
    // 重新初始化原行和新行的Selectpicker
    lastRow.find('.opponent-selectpicker').selectpicker();
    newRow.find('.opponent-selectpicker').selectpicker();
});

注意事项 #

• 表单元素的name属性需使用数组格式（如opponents[]），确保Laravel后端能正确接收多行数据。
• 动态生成的元素事件需用事件委托（如$(document).on('click', '.remove-row', ...)），避免事件绑定失效。

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