Select2 為單擊時生成的第一項初始化，然后在單擊時生成新的 div 項時， select2 屬性從第一項中洗掉并在第二次初始化。
$(document).ready(function(){
$("#packages #add_package").on("click", function(){
$(this).before(
"<div class='col-12 packageCard'>"
"<div class='col-4'>"
"<div class='form-group'>"
"<label>Container Type</label>"
"<select name='cntType' id='cntType' class='form-control select2' data-dropdown-css-class='select2' style='width: 100%;'>"
"<option value='0' selected='selected' disabled>Select Container Type</option>"
"<option>20 feet</option>"
"<option>40 feet</option>"
"</select>"
"</div>"
"</div>"
"</div>");
$('.select2').select2();
});
})
uj5u.com熱心網友回復：
如果您檢查瀏覽器的 devtools 控制臺，您將看到嘗試添加第二個 select2 時拋出的 Javascript 錯誤：
未為 Select2 定義未捕獲的查詢函式
如果你搜索那個錯誤，你會發現一些其他的問題，例如這個：“query function not defined for Select2 undefined error”
如果你通讀答案和評論，你會發現有幾個描述了你在做什么：
- 這條評論：
如果選擇控制元件已由 .select2({}) 方法初始化，則通常會發生此問題。更好的解決方案是首先呼叫 destroy 方法。例如： $("#mySelectControl").select2("destroy").select2({});
- 這個答案：
它的其他可能來源之一是您試圖在已經“select2ed”輸入上呼叫 select2() 方法。
- 還有這個答案：
我也遇到了這個問題，請確保您沒有將 select2 初始化兩次。
……可能還有更多。這些描述了你在做什么——呼叫已經初始化為 select2s.select2()的元素。第二次運行，以及嘗試初始化新的 select2，它再次將第一個 select2 重新初始化為 select2。$('.select2').select2()
您的代碼中還有另一個問題 - 每個選擇都有相同的 ID: id='cntType'。ID 在頁面上必須是唯一的，因此這是無效的 HTML。
我們可以通過跟蹤您在頁面上選擇的數量來同時解決這兩個問題，并為每個新選擇一個包含其編號的 ID，例如cntType-1,cntType-2等。然后我們可以僅針對新 ID 將其初始化為選擇2。
這是一個作業示例。
$(document).ready(function () {
// Track how many selects are on the page
let selectCount = 0;
$("#packages").on("click", function () {
// New select! Increment our counter
selectCount ;
//. Add new HTML, using dynamically generated ID on the select
$(this).before(
"<div class='col-12 packageCard'>"
"<div class='col-4'>"
"<div class='form-group'>"
"<label>Container Type</label>"
"<select name='cntType' id='cntType-" selectCount "' class='form-control select2' data-dropdown-css-class='select2' style='width: 100%;'>"
"<option value='0' selected='selected' disabled>Select Container Type</option>"
"<option>20 feet</option>"
"<option>40 feet</option>"
"</select>"
"</div>"
"</div>"
"</div>");
// Initialise only our new select
$('#cntType-' selectCount).select2();
});
})<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"></script>
<button id="packages">Add</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/526339.html
標籤：javascriptjQueryjQuery-select2
上一篇：問題動態初始化select2
下一篇：找不到Java所需的模塊