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

Question

我的选择选项使用Select2。当我添加js示例基本的单个类添加到一个选择选项中，但似乎每当我将同一个类添加到同一页面中的其他选择框中时，它都不会对它们起作用。我做错什么了吗？

<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>

Answer 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>

Answer 2

似乎在页面上有两个ID相同的选择选项可能会导致"选择2"；只影响最后一个，这可以解释为什么只有一个选择选项以所需格式显示，而另一个没有。