如何为动态新增的select下拉框添加select2功能

问题根因 #

• 初始化选择器匹配规则问题：你代码中初始化select2用的选择器是.js，但动态生成的下拉框没有添加js类，自然不会被初始化规则命中。
• 动态DOM初始化时机问题：$(document).ready()中的初始化逻辑仅在页面首次加载完成时执行一次，后续通过JS动态插入到页面的下拉框没有经过select2初始化，不会自动加载对应效果。

解决方案 #

统一给需要加载select2效果的下拉框添加专属标识类，页面初始化时初始化已有的下拉框，每次新增下拉框后单独对新增元素执行初始化即可，修改后的完整代码如下：

静态HTML部分（给select添加专属类select2-project）：

<table class="table" id="dynamicTable12" style="width: 50%">
    <tr>
        <th scope="col" span="1" style="width: 25%;" >projects</th>
    </tr>
    <tr>
        <td> 
            <select name="addmore1[0][project]" class="form-control select2-project" id="state" required="required">
                <option value="">-- Select Project --</option>
                <option value="A">A</option>
                <option value="B">B</option>
            </select>
        </td>  
        <td><button type="button" name="add" id="add12" class="btn btn-success">Add More</button></td>  
    </tr>
</table>

JS部分修改：

var i = 0;
$("#add12").click(function(){
    ++i;
    // 先构造新行DOM对象
    var newTr = $('<tr><td><select name="addmore1['+i+'][project]" class="form-control select2-project" required="required"><option value="">-- Select Project --</option> <option value="A">A</option><option value="B">B</option></select></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
    // 插入新行到表格
    $("#dynamicTable12").append(newTr);
    // 单独给新行内的select初始化select2
    newTr.find('.select2-project').select2({
        width: '100%' // 可选，避免下拉框宽度错位
    });
});
$(document).on('click', '.remove-tr', function(){  
     $(this).parents('tr').remove();
}); 

$(document).ready(function() {
    // 初始化页面已有的select2下拉框
    $('.select2-project').select2({
        width: '100%'
    });
});

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