Home select2 plugin not working When generating a new row with a dynamic drop down list

Questions

select2 plugin not working When generating a new row with a dynamic drop down list

March 10, 2023

$("#add-btn").click(function() {
        $("#dynamicAddRemove").append('<tr>
        <td><select class="select_acount js-example-basic-single"><option value="">1</option><option value="">2</option>
        <option value="">3</option><option value="">4</option></select></td> 
         <td><button type="button" name="add" class="btn btn-danger remove-tr"><i class="fas fa-trash" ></i></button></td></tr>');
      });
      $(document).ready(function() {
        $('.js-example-basic-single').select2( {dropdownParent: $('#exampleModal')});
       
    });

    <table id="dynamicAddRemove">
          <tr>
          <td><select class="select_acount js-example-basic-single"> 
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          </select>
          </td>    
          <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success"></i></button></td>
          </tr>          
          </table>
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
           <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

I can’t get a dynamic drop-down list that contains the search feature inside that drop-down list using the select2 plugin, it only works in the first field or the non-dynamic field, but when I generate a new dynamic drop-down list I get a drop-down list that unfortunately does not contain the search feature in it, please Help

>Solution :

In $("#add-btn").click, after generating the new list, call Select2.
I hope I can help with your question.

$(document).ready(function() {
    $('.js-example-basic-single').select2();    
});

$("#add-btn").click(function() {

    $("#dynamicAddRemove").append('<tr> <td><select class="select_acount js-example-basic-single" style="width: 200px;"><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option></select></td>  <td><button type="button" name="add" class="btn btn-danger remove-tr"><i class="fas fa-trash" ></i></button></td></tr>');

    $('.js-example-basic-single').select2();  
    
});

<table id="dynamicAddRemove">
      <tr>
      <td><select class="select_acount js-example-basic-single" style="width: 200px;"> 
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
      </select>
      </td>    
      <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success"></i></button></td>
      </tr>          
      </table>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>