javascript select2插件不工作生成具有动态下拉列表的新行时

63lcw9qa 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(112)

$("#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>

我无法使用select2插件获得包含搜索功能的动态下拉列表，它只能在第一个字段或非动态字段中工作，但当我生成新的动态下拉列表时，我得到的下拉列表不幸不包含搜索功能，请帮助

JavaScript

来源：https://stackoverflow.com/questions/75699043/select2-plugin-not-working-when-generating-a-new-row-with-a-dynamic-drop-down-li

1条答案

按热度按时间

au9on6nz1#

在$（“#add-btn”）.click中，生成新列表后，调用Select 2。希望我能帮助您解决问题。

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

赞(0）回复(0）举报 2023-03-11

我来回答

javascript select2插件不工作生成具有动态下拉列表的新行时

1条答案

相关问题

热门标签

最新问答