如何在具有相同類的頁面上初始化所有 Select2 下拉列表

Question

我正在使用來自http://ivaynberg.github.io/select2/ 的Select2

現在我正在初始化這樣的下拉菜單：

 <script>
 $(document).ready(function() { 

 $('.form_control').select2({
     minimumResultsForSearch: -1
 });

  });
 </script>

問題是，我有一個頁面，我在其中動態生成基於下拉列表的訂單，因此我將在同一頁面上有多個下拉列表和具有相同類的表單，如下所示：

<select id="order_status" class="form-control" name="order_status">

<option value="">Option 1</option>
<option value="">Option 2</option>

</select>

當我這樣做時，第一個下拉列表初始化得很好，但同一頁面上的所有其他下拉列表都沒有。 我如何讓它初始化所有的 form_control 下拉菜單？

JSFiddle： http : //jsfiddle.net/hryoy8rc/1/

Answer 1

它是當前版本中的一個錯誤，我使用4.0.0時遇到相同的問題，它將解決您的問題： https : //cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js

Answer 2

在下面嘗試我的代碼...

 $('.form_control').each(function(index, element) { $(this).select2({ minimumResultsForSearch: -1 }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="order_status" class="form-control" name="order_status"> <option value="">Option 1</option> <option value="">Option 2</option> </select> 

維也納的問候

Answer 3

我最終給每個下拉列表一個動態生成的ID，例如drop_003，然后像這樣在體內對其進行初始化：

<script>
$('#drop_003').select2({
minimumResultsForSearch: -1
});
</script>

Answer 4

我正在使用Select2 4.0.2版本，此代碼段對我有用。 它將頁面中的所有選擇元素初始化為Select2。

$(document).ready(function () {
   $('select').select2();
});

Answer 5

為了動態生成框，我必須實際循環選項而不是使用助手。

解決方法在這里：

 $('.myselect').select2();

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> <form action="" method="POST" role="form"> <p> working boxes </p> <select class="form-control myselect"> <option>Service 1</option> <option>Service 2</option> </select> <br> <br> <select class="form-control myselect"> <option>Service 1</option> <option>Service 2</option> </select> </form>