如何將select2功能添加到新添加的動態選擇框

我正在嘗試在 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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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=""  required="required"><option value="">-- Select Project --</option> <option value="A">A</option><option value="B">B</option></select></td><td><button type="button" >Remove</button></td></tr>');
});
$(document).on('click', '.remove-tr', function(){  
     $(this).parents('tr').remove();
}); 

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

uj5u.com熱心網友回復：

我不確定您提供的原始代碼是否正常作業。因為沒有.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=""  required="required"><option value="">-- Select Project --</option> <option value="A">A</option><option value="B">B</option></select></td><td><button type="button" >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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

標籤：javascript 查询 jquery-select2

上一篇：為什么我不能在JS中匯入模塊

下一篇：為什么在使用計算屬性時不能在v-if中的字串上使用.includes？