How to add select2 function to newly added dynamic select box-CodePudding

I am trying to implement select2 in the Html form it was working for the first element

But it was not working for the second element added dynamically

so please help me to achieve this I tried my best to do this but I was new to JavaScript and select2 please help me

I wrote my entire code in this so please do needful

Thanks in Advance

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

CodePudding user response：

I'm not really sure if the original code you provided was working properly. Because there was no element that has .js class as shown in this line:

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

However, let's get straight to the point. The reason the second or later select were not funcitoning is because when the new element is created, select2 plug-in does not regconize this new element. Therefore, you have to reinitialize select2 plug-in again. You can achieve this by giving the initialization code in a separate funciton, then recall it when a new element is added. Notice the js class and reinitializeSelect2 fucntion in provided code.

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>