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

Posted 2023-05-07

【中文标题】如何初始化具有相同类的页面上的所有 Select2 下拉菜单

【英文标题】：how to initialize all Select2 dropdowns on a page with the same class

【发布时间】：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

【参考方案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>