Select2: работает только с одним параметром выбора, но не с двумя или более параметрами выбора

#select #jquery-select2 #angularjs-select2

#выберите #jquery-select2 #angularjs-select2

Вопрос:

Я использую 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>
 

Комментарии:

1. jsfiddle.net/g5t4yo1u

2. @berndy2001 Я обновил код, я фактически создаю выбор динамически.

3. На этот раз я попытался написать тот же код, и я удалил идентификатор из опции выбора, и это просто сработало! Я не знаю, как и почему, но это работает сейчас

Ответ №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>