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.

Cómo mostrar el valor exacto de una opción seleccionada de un menú desplegable?

20 Jul, 2023 Programación

He configurado mi select a través de select2 y las cosas funcionan bastante bien.

He utilizado templateResult con el enfoque formatState para agregar el icono a mis opciones de desplegable.

$(".js-country-list").select2({
  templateResult: formatState
});

Sin embargo, esto no cambia nada en el valor seleccionado (ver imagen a continuación).

¿Cómo puedo asegurarme de que el valor seleccionado (en mi caso, EUR) se muestre exactamente igual que la opción: Euro (EUR)?

Gracias.

Imagen

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar el valor seleccionado exactamente igual que la opción con la bandera, puedes usar la opción templateSelection en select2 junto con una función personalizada.

    Primero, define una función que tome la opción seleccionada y devuelva el código HTML para el valor seleccionado. Por ejemplo:

    function formatSelection(selectedOption) {
  return '<span><i class="' + selectedOption.element.value.toLowerCase() + '"></i> ' + selectedOption.text + '</span>';
}

    Aquí, estamos utilizando el valor de la opción seleccionada (que debería ser el código de moneda) para agregar una clase CSS al elemento de icono, y luego concatenando el icono y el texto juntos en un elemento span.

    Luego, pasa esta función a la opción templateSelection:

    $(".js-country-list").select2({
  templateResult: formatState,
  templateSelection: formatSelection
});

    Esto debería mostrar el valor seleccionado con el icono al igual que las opciones en el menú desplegable.

Comments are closed.