无法在任何函数内重新初始化select2

Question

我正在尝试以编程方式添加select2。这是我的代码

$(document).on("click", "#btnAddRow", function(e) {
  var newText = $(".rawRow").html();
  var lastText = '<div class="row productInfoRow" style="margin-top: 5px;">' + newText + '</div>';
  $(".productInfoRow:last").after(lastText);
  $(".productList:last").focus();

  $(".productList").select2("destroy").select2();  
});

但我收到Uncaught TypeError: $(...).selec2 is not a function错误。

我初始化外部功能的第一个选择正在工作。

<script>
   $(".productList").select2();
</script>

但它没有其他工作。

正如你在第1张照片中看到的那样工作。但第二或第三个不起作用。

Answer 1

点击后进行简单通话：

您可以轻松点击功能后调用select2：

＆＃13;

＆＃13;

$(document).on("click", "#btnAddRow", function(e) {
  //var newText = $(".rawRow").html();
  //var lastText = '<div class="row productInfoRow" style="margin-top: 5px;">' + newText + '</div>';
  // $(".productInfoRow:last").after(lastText);
  //$(".productList:last").focus();

  $('.productList').select2();

});

＆＃13;

#btnAddRow {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  float: left;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

<select class="productList" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
<br>
<div id="btnAddRow">Add Select2</div>

＆＃13;

＆＃13;

＆＃13;

使用动态数据：

或者您可以向其添加新数据，而无需初始化或销毁。甚至ajax call它会自动添加数据。

＆＃13;

＆＃13;

$('.productList').select2();

$(document).on("click", "#btnAddRow", function(e) {
  //var newText = $(".rawRow").html();
  //var lastText = '<div class="row productInfoRow" style="margin-top: 5px;">' + newText + '</div>';
  // $(".productInfoRow:last").after(lastText);
  //$(".productList:last").focus();

  $('.productList').append('<option value="US">United State</option>');
  

});

＆＃13;

#btnAddRow {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  float: left;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

<select class="productList" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
<br>
<div id="btnAddRow">Add Some other option</div>

＆＃13;

＆＃13;

＆＃13;