es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Añade una opción vacía en select2 cuando las opciones se crean desde jQuery.

19 Jul, 2023 Programación

Intento agregar una opción vacía <option></option> cuando configuro las opciones desde jQuery, pero cuando se carga la página, se selecciona la primera opción. Agregué allowClear: true, placeholder: "Seleccionar...", pero no funcionó.

Encontré una solución alternativa para limpiar la opción después de inicializar select2, la cual funciona, pero ¿hay alguna solución mejor?

$(".select2-it").val(null).trigger('cambio');


var itData = [{
    id: 0,
    text: 'Aplicaciones',
    children: [{
        id: '1',
        text: 'Aplicación 1'
      },
      {
        id: '2',
        text: 'Aplicación 2'
      },
      {
        id: '3',
        text: 'Aplicación 3'
      }
    ]
  },
  {
    id: 4,
    text: 'error'
  },
  {
    id: 5,
    text: 'duplicado'
  }
];

$(".select2-it").select2({
  allowClear: true,
  placeholder: "Seleccionar...",
  data: itData,
  width: "100%"
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<select id="it-target" class="select2-it form-control"></select>

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Cuando se establecen las opciones desde jQuery, se puede agregar una etiqueta <option></option> vacía al final del elemento select antes de llamar a select2(). Por ejemplo:

    $(".select2-it").append('<option></option>').select2({
  allowClear: true,
  placeholder: "Seleccionar...",
  data: itData,
  width: "100%"
});

    Esto debería evitar que la primera opción se seleccione por defecto. Si aún encuentras el problema, puedes utilizar la opción initSelection para establecer explícitamente la selección inicial en null:

    $(".select2-it").select2({
  allowClear: true,
  placeholder: "Seleccionar...",
  data: itData,
  width: "100%",
  initSelection: function(element, callback) {
    callback(null);
  }
});

    Esto asegurará que ninguna opción esté seleccionada cuando se inicialice el select2.

Comments are closed.