Select2 ：仅适用于一个选择选项，但不适用于两个或更多选择选项

Posted 2023-05-07

【中文标题】Select2 ：仅适用于一个选择选项，但不适用于两个或更多选择选项

【英文标题】：Select2 : Works only in one select option but not in two or more select options

【发布时间】：2022-01-07 19:42:40

【问题描述】：

我使用Select2 作为我的选择选项。当我添加 js-example-basic-single 类添加到一个选择选项，但似乎每当我将相同的类添加到同一页面中的其他选择框时，它都不会对它们起作用。我做错了吗？

<ul class="list-group" id="here">
  <li class="list-group-item row" ng-repeat="element in mylist">
    <div class="col-sm-5">
      <select id='element' class="js-example-basic-single form-select" name="element-$index" ng-model="finalView.details" ng-change='setStatus()' required="true">
        <option class="text-uppercase" ng-repeat="item in Views" ng-value="item">item.viewname</option>
      </select>
    </div>
    <button class="col-sm-1 btn btn-outline-danger" ng-click="removeChoice($index)" ng-if="mylist.length >1"><i data-feather="x-circle"></i></button>
    <button class="col-sm-1 btn btn-outline-primary" ng-click="addNewChoice()" ng-if="mylist.length==1"><i data-feather="plus-circle"></i></button>
  </li>
</ul>

<script>
 $(document).ready(function() 
       $('.js-example-basic-single').select2();
 );
</script>

【问题讨论】：

jsfiddle.net/g5t4yo1u

@berndy2001 我已经更新了代码，我实际上是在动态创建选择。

这次我尝试编写相同的代码，并从选择选项中删除了 id，它就成功了！我不知道如何或为什么，但它现在有效

【参考方案1】：

我不知道它是如何工作的，但我再次重写了相同的代码，只做了非常小的改动。如果他们知道原因，欢迎任何人解释这一点。 这是有效的代码：

<ul class="list-group" id="here">
  <li class="list-group-item row" ng-repeat="element in mylist">
    <div class="col-sm-5">
      <select class="js-example-basic-single form-select" name="element-$index" ng-model="finalView.details" ng-change='setStatus()' required="true">
        <option class="text-uppercase" ng-repeat="item in Views" ng-value="item" selected='selected'>item.viewname</option>
      </select>
    </div>
    <button class="col-sm-1 btn btn-outline-danger" ng-click="removeChoice($index)" ng-if="mylist.length >1"><i data-feather="x-circle"></i></button>
    <button class="col-sm-1 btn btn-outline-primary" ng-click="addNewChoice()" ng-if="mylist.length==1"><i data-feather="plus-circle"></i></button>
  </li>
</ul>