当我使用 select2 创建动态下拉列表时，它会中断

Question

我有一个 table，它有一个 "genre" 列，它有一个 select 框，它使用 Select2 填充，我有一个按钮可以向 table，一旦我向 table 添加新行，我也尝试使用 select2 填充流派，但它的错误导致新的 select 下拉列表不select有能力。

在这里查看我的 JSFiddle：https://jsfiddle.net/hm3w7jtz/3/

为了解决这个问题，请添加一个新组，然后您会注意到新的行类型无法 select。

https://jsfiddle.net/szjd6gu4/2/

代码

   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
   </head>
   <h3> Movies </h3>
    <table class="my_table" id="movies" border="1px" style="border-collapse: collapse;">
    <thead>
      <tr><b>
        <td>Group</td>
        <td>Genre</td>
        <td>Movie Name</td>
        <td>Imdb</td>
        <td>Rotten Tomato</td>
        <td>Lead Actress</td>
        <td>Lead Actor</td>
        <td>Year of Release</td>
        <td>Revenue</td>
        <td>Budget</td>
      </tr></b>
    </thead>

    <tbody>
    <tr class="group-row">
    <td class="nr"><input type="text" placeholder="" size="9"><button id="btn" class="group" style="float:right;">+</button>
    </td>
    <td><select id="genre" class='genre' style="width:150px;"></select></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="10" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    </tr>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
    var genre = ['Action', 'Adventure', 'Fantasy', 'Anime', 'Romance'];
     $(".genre").select2({
        data: genre
      });
  });

  var row ="<td class='nr'><input type='text' placeholder='' size='9'><button id='btn' class='group' style='float:right;'>+</button></td><td><select id='genre' class='genre' style='width:150px;'></select></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='10' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td>";  


const $groupRow = $("<tr>", {
  class: "group-row"
}).append(row);

const tableBody = $("#movies tbody");
tableBody.on('click', '.group', (e) => {
  tableBody.append($groupRow.clone());
      $(".genre").select2({
        data: genre
      });
});
  </script>

Answer 1

您的代码有 2 个问题：

1) 从你的两个 Selects

中删除 id="genre"

<select id="genre" class='genre' style="width:150px;"></select>

2) 你需要在 $(document).ready 函数之前移动带有 Array 的行：

//BEFORE
    $(document).ready(function() {
    var genre = ['Action', 'Adventure', 'Fantasy', 'Anime', 'Romance'];
     $(".genre").select2({
        data: genre
      });
  });

//AFTER
var genre = ['Action', 'Adventure', 'Fantasy', 'Anime', 'Romance'];

$(document).ready(function() {            
         $(".genre").select2({
            data: genre
          });
      });

var genre = ['Action', 'Adventure', 'Fantasy', 'Anime', 'Romance'];
    $(document).ready(function() {
    
     $(".genre").select2({
        data: genre
      });
  });
  
  var row ="<td class='nr'><input type='text' placeholder='' size='9'><button id='btn' class='group' style='float:right;'>+</button></td><td><select class='genre' style='width:150px;'></select></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='10' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td>";  


const $groupRow = $("<tr>", {
  class: "group-row"
}).append(row);

const tableBody = $("#movies tbody");
tableBody.on('click', '.group', (e) => {
  tableBody.append($groupRow.clone());
  
      $(".genre").select2({
        data: genre
      });
});

   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
   </head>
   <h3> Movies </h3>
    <table class="my_table" id="movies" border="1px" style="border-collapse: collapse;">
    <thead>
      <tr><b>
        <td>Group</td>
        <td>Genre</td>
        <td>Movie Name</td>
        <td>Imdb</td>
        <td>Rotten Tomato</td>
        <td>Lead Actress</td>
        <td>Lead Actor</td>
        <td>Year of Release</td>
        <td>Revenue</td>
        <td>Budget</td>
      </tr></b>
    </thead>

    <tbody>
    <tr class="group-row">
    <td class="nr"><input type="text" placeholder="" size="9"><button id="btn" class="group" style="float:right;">+</button>
    </td>
    <td><select class='genre' style="width:150px;"></select></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="10" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    </tr>
    </tbody>
  </table>

当我使用 select2 创建动态下拉列表时，它会中断

When I create a dynamic dropdown using select2 it breaks

jquery-select2