如何将 select2 功能添加到新添加的动态选择框

Question

我正在尝试在 Html 表单中实现 select2，它适用于第一个元素

但它不适用于动态添加的第二个元素

我已尽力做到这一点，但我是 JavaScript 新手并选择 2

我在这写了我的整个代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<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" 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>

<script type="text/javascript">
var i = 0;
$("#add12").click(function(){
    ++i;
    $("#dynamicTable12").append('<tr><td><select name="addmore1['+i+'][project]" id="" class="form-control" 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>');
});
$(document).on('click', '.remove-tr', function(){  
     $(this).parents('tr').remove();
}); 

$(document).ready(function() {
    $('.js').select2();
});
</script>       

Answer 1

我不确定您提供的原始代码是否正常工作。 因为没有具有.js类的元素，如下行所示：

$('.js').select2();

但是，让我们进入正题。 第二个或以后的select没有功能的原因是因为在创建新元素时， select2插件不会重新配置这个新元素。 因此，您必须再次重新初始化select2插件。 您可以通过在单独的函数中提供初始化代码来实现这一点，然后在添加新元素时调用它。 注意提供的代码中的js类和reinitializeSelect2功能。

 let initializeSelect2 = function() { $('.js').select2(); } var i = 0; $("#add12").click(function(){ ++i; $("#dynamicTable12").append('<tr><td><select name="addmore1['+i+'][project]" id="" class="form-control js" 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>'); initializeSelect2() }); $(document).on('click', '.remove-tr', function(){ $(this).parents('tr').remove(); }); $(document).ready(function() { initializeSelect2() });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <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 js" 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>