如何初始化具有相同类的页面上的所有 Select2 下拉菜单答案

【问题标题】：how to initialize all Select2 dropdowns on a page with the same class如何初始化具有相同类的页面上的所有 Select2 下拉菜单
【发布时间】：2014-12-05 00:17:24
【问题描述】：

我正在使用来自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/

【问题讨论】：

顺便说一下，我可以为下拉菜单分配唯一的 ID，但它们可以是 000001 到 683935 之间的任何位置，所以这也不是一个好的选择。
JSFiddle: jsfiddle.net/hryoy8rc/1

标签： javascript jquery jquery-select2

【解决方案1】：

它是当前版本中的一个错误，我在使用 4.0.0 时遇到了同样的问题，它将解决您的问题： https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js

【讨论】：

【解决方案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>

来自维也纳的问候

【讨论】：

【解决方案3】：

我最终为每个下拉列表提供了一个动态生成的 ID，例如 drop_003，然后在正文中初始化它，如下所示：

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

【讨论】：

【解决方案4】：

我正在使用 Select2 4.0.2 版本，这个 sn-p 对我有用。它将页面中的所有选择元素初始化为Select2。

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

【讨论】：

【解决方案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>

【讨论】：