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.

jQuery select2 con WordPress

25 Jul, 2023 Programación

Estoy trabajando con jQuery select2 dentro de WordPress.

Tengo una tabla HTML como esta.

enter image description here

Aquí necesito que si el usuario hace clic en “Bob Smith y admin”, se convierta en un menú desplegable “select2” con selección múltiple.

Pero cuando hago clic en él, se ve de la siguiente manera:

enter image description here

y si vuelvo a hacer clic, el menú desplegable se ve así:

enter image description here

Cuando hago clic en cualquier valor, se ve así:

enter image description here

Mi código jQuery es el siguiente:

(function($) {
  var states = [];

  $(document).ready(function() {
    $(".volunteer").on("click", function(event) {
      // Verificar si el select ya está cargado
      if (!$(this).has("select").length) {
        var cellEle = $(this);
        var cellId = this.id;

        // Rellenar el elemento select
        cellEle.html(`<select class="js-example-basic-multiple" multiple="multiple">
            <option value="AL">Alabama</option>
            <option value="WY">Wyoming</option>
            </select>`);

        // Inicializar select2
        let selectEle = cellEle.children("select").select2();

        if(states[cellId]){
            // preseleccionar valor existente
          selectEle.val(states[cellId]);
          selectEle.trigger('change'); 
        }

        selectEle.on("select2:close", function(event) {
          // Obtener el valor seleccionado
          selectedValue = selectEle.select2('data')[0]['text'];

          // Actualizar el array          
          states[cellId] = selectedValue.id;

          // Destruir select2
          selectEle.select2('destroy');

          // Cambiar el html para mostrar solo el valor
          cellEle.html(selectedValue.id);
        });
      }
    });
  });
})(jQuery)

Mi código HTML es el siguiente:

<td class="volunteer" id="47">Bob Smith y admin</td>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Trabajando con jQuery Select2 en WordPress

    Descripción

    Como experto en TI especializado en javascript, jquery, wordpress, jquery-select2, se te ha asignado la tarea de trabajar con jQuery Select2 dentro de WordPress. Tienes una tabla HTML en la que necesitas convertir las celdas seleccionadas en un menú desplegable de select2 con selección múltiple cuando se hace clic en ellas. Sin embargo, hay un problema con la apariencia y funcionalidad del menú desplegable. A continuación, se muestra tu código.

    Problema

    Cuando haces clic en una celda, se muestra un menú desplegable con un aspecto extraño que no funciona como se espera. Cuando haces clic en un valor, cambia la celda para mostrar solo ese valor. El valor preseleccionado no funciona como se pretendía, lo que impide al usuario seleccionar un elemento.

    Solución

    Tu código de jQuery tiene algunos problemas que deben ser corregidos. Debes:

    1. Agregar una clase al elemento select en el código HTML.
    2. Mover la matriz states fuera del bloque $(document).ready(function() para que sea accesible globalmente.
    3. Actualizar el evento on('select2:close') para manejar opciones múltiples seleccionadas.
    4. Actualizar el código para preseleccionar el valor existente.

    Aquí está el código de jQuery actualizado:

    (function($) {
  var states = [];

  $(document).ready(function() {
    $(".volunteer").on("click", function(event) {
      // Verificar si el select ya está cargado
      if (!$(this).has("select").length) {
        var cellEle = $(this);
        var cellId = this.id;

        // Poblar el elemento select
        cellEle.html(`<select class="js-example-basic-multiple" multiple="multiple">
            <option value="AL">Alabama</option>
            <option value="WY">Wyoming</option>
            </select>`);

        // Inicializar select2
        let selectEle = cellEle.children("select").select2();

        if(states[cellId]){
            // Preseleccionar el valor existente
          selectEle.val(states[cellId].split(',')).trigger('change'); 
        }

        selectEle.on("select2:close", function(event) {
          // Obtener valores seleccionados
          selectedValues = selectEle.select2('data');

          // Actualizar el array          
          states[cellId] = selectedValues.map(function(obj) {return obj.id}).join(',');

          // Destruir select2
          selectEle.select2('destroy');

          // Cambiar html para mostrar solo el/los valor(es)
          cellEle.html(selectedValues.map(function(obj) {return obj.id}).join(','));
        });
      }
    });
  });
})(jQuery);

    Aquí está el código HTML actualizado:

    <td class="volunteer" id="47">Bob SMith y admin</td>

    Nota: Asegúrate de incluir el complemento select2 y las hojas de estilo en tu configuración de WordPress.

Comments are closed.