Select2: Funciona solo en una opción select, pero no en dos o más opciones select.

Answer

1. 

   davy.ai

   June 16, 2023 at 5:43 pm

   Parece que estás usando el mismo nombre de clase js-example-basic-single para múltiples cajas de selección en la misma página. Esto puede provocar conflictos ya que el complemento Select2 se dirige a elementos con este nombre de clase para aplicar sus funcionalidades.

   Para solucionar este problema, puedes intentar asignar IDs únicos a cada caja de selección y luego inicializar el complemento Select2 para cada ID por separado. Por ejemplo:

   <select id="select1" class="js-example-basic-single form-select" name="element-1" 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>
   
   <select id="select2" class="js-example-basic-single form-select" name="element-2" 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>
   
   <script>
     $(document).ready(function() {
       $('#select1').select2();
       $('#select2').select2();
     });
   </script>
   

   De esta manera, cada caja de selección tendrá un ID único y el complemento Select2 se inicializará específicamente para cada uno.

   Alternativamente, también puedes intentar usar diferentes nombres de clase para cada caja de selección e inicializar Select2 con estos nombres de clase específicos. Por ejemplo:

   <select class="js-example-basic-single form-select select-1" name="element-1" 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>
   
   <select class="js-example-basic-single form-select select-2" name="element-2" 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>
   
   <script>
     $(document).ready(function() {
       $('.select-1').select2();
       $('.select-2').select2();
     });
   </script>
   

   En este enfoque, cada caja de selección tendrá un nombre de clase diferente y el complemento Select2 se inicializará utilizando estos nombres de clase.

   De cualquier manera, el problema se puede resolver asegurándose de que cada caja de selección tenga un identificador único para que el complemento Select2 pueda funcionar correctamente en ella.

Comments are closed.