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.

Eliminar el valor seleccionado anteriormente de la lista select2.

18 Jul, 2023 Programación

Tengo un select con una de las opciones desactivadas (se desactiva/activa dinámicamente cuando un usuario hace clic en otros campos del formulario, agregando el atributo “disabled” con jquery):

Por alguna razón, tengo que seleccionar la primera opción de este select, y no puedo modificar esta parte del código:

$(“select[name=’custom’]”).select2();
$(“select[name=’custom’]”).val($(“select[name=’custom’] option:first”).val());
$(“select[name=’custom’]”).select2(“val”, $(“select[name=’custom’] option:first”).val());

No quiero ver la opción desactivada en mi lista de select2, y uso algo de CSS para ocultarla:

.select2-results__option[aria-disabled=”true”] {
display: none;
}

Se oculta de la lista de select2, pero… todavía se muestra como valor seleccionado. ¿Cómo puedo evitar mostrarla también como valor seleccionado?

Aquí hay un fiddle https://jsfiddle.net/y1tsh8ka/4/

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para evitar que la opción deshabilitada se muestre como la opción seleccionada, puedes agregar una declaración condicional para verificar si la opción seleccionada está deshabilitada, y si es así, seleccionar la siguiente opción habilitada en su lugar. Puedes usar el método prop() para verificar si una opción está deshabilitada o no, y el método find() para seleccionar la siguiente opción habilitada.

    Aquí está el código actualizado:

    $("[name='custom']").select2({
    // ejecutar esta función después de que se inicialice el select2
    initSelection: function (element, callback) {
        var value = $(element).val(); // obtener el valor seleccionado
        // verificar si la opción seleccionada está deshabilitada
        if ($(element).find('option:selected').prop('disabled')) {
            // seleccionar la siguiente opción habilitada en su lugar
            var $enabledOption = $(element).find('option:not(:disabled)').first();
            if ($enabledOption.length) {
                value = $enabledOption.val();
                // actualizar el valor del select2
                $(element).val(value);
                $(element).select2('val', value);
            }
        }
        callback({id: value, text: value}); // actualizar la visualización del select2
    }
});

$("[name='custom']").select2('val', $("[name='custom'] option:first:not(:disabled)").val()); // seleccionar la primera opción habilitada

    Este código utiliza la opción initSelection del complemento select2 para verificar si la opción seleccionada está deshabilitada y seleccionar la siguiente opción habilitada en su lugar. La función initSelection se ejecuta después de que se inicializa el select2, y su resultado se utiliza para actualizar la visualización del select2.

    Ten en cuenta que el código también selecciona la primera opción habilitada utilizando el selector :not(:disabled).

Comments are closed.