5

Lo que pretendo hacer es que al seleccionar una de las opciones se coloque el texto del padre (optgroup) y me muestre algo como "LG / Lg - Prueba 1" (notece en el ejemplo que coloco que "LG" es el padre (optgroup) y "Lg - Prueba 1" es el hijo (option)) y quiero hacer para que el usuario pueda apreciar cual padre (optgroup) esta seleccionando.

En el ejemplo que coloco la función formatDataSelection es la que se encarga de colocar el texto al seleccionar una opción.

A continuación el código de lo que llevo:

var data = {"results":[{"text":"LG","children":[{"id":1,"text":"Lg - Prueba 1"},{"id":2,"text":"Lg - Prueba 2"}]},{"text":"Samsung","children":[{"id":3,"text":"Sam - Prueba 1"},{"id":4,"text":"Sam - Prueba 2"}]}],"pagination":{"more":false}};


$("select").select2({
  placeholder: "Elija...",
  allowClear: true,
  data: data.results,
  escapeMarkup: function (markup) { return markup; },
  templateResult: formatData,
  templateSelection: formatDataSelection
});
function formatData (data) {
  if (data.loading) return data.text;
  return data.text;
}
function formatDataSelection (data) {
  return data.text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>

La respuesta que el usuario @JuankGlezz me dio, me llevo a este otro problema: No se consigue el texto del label padre del option seleccionado.

$('select').select2({
    placeholder: "Elija...",
    allowClear: true,
    ajax: {
    	type: "GET",
        dataType: 'json',
        url: 'https://api.myjson.com/bins/12apr1',
        delay: 250,
        data: function(params) {
            return {
	            term: params.term, // search term
	            page: params.page || 1, //page number
            }
        },
	    processResults: function (data, page) {
	        return {
                results: $.map(data.results, function (n) {
                    return {
                        text: n.text,
                        children: n.children
                    }
                }),
	            //results: data.results,
	            pagination: {
	                more: data.pagination.more,
	            }
	        };
	    },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    templateResult: crear_marca_modelo_formatData,
    templateSelection: crear_marca_modelo_formatDataSelection
});
function crear_marca_modelo_formatData (data) {
	if (data.loading) return data.text;
	return data.text;
}
function crear_marca_modelo_formatDataSelection (data) {
	let labelOptg = $(data.element).parent().attr('label');
	return labelOptg + " / " + data.text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>

2 respuestas 2

5
+100

Si te fijas en el DOM que se crea al generar tu segundo script no es el típico con optgroup si no que crea uno con la siguiente forma:

<li .... role="group" aria-label="Life Good">
    <strong ...> Life Good </strong>
    <ul ....>
        <li ....> Lg Prueba 1 </li>
        <li ....> Lg Prueba 2 </li>
    </ul>
</li>

Por lo tanto, al hacer referencia al elemento padre no haces referencia al optgroup (tal y como lo tienes en tu ejemplo actualmente) si no al ul.

También he podido observar que cada uno de los elementos del select cuando los seleccionas obtienen una determinada clase llamada .select2-results__option--highlighted por lo que he utilizado esta clase para hacer referencia al elemento que acabamos de seleccionar.

Posteriormente, y viendo como toma la estructura el DOM una vez se genera el desplegable, voy a escalar dos posiciones mediante .parent().parent() para llegar a los li aunque voy a filtrar que solo me obtenga los elementos con role="group" haciendo el filtro .find("[role='group']").

Por último, obtendré el elemento prevObject para detectar cual es el anterior al elemento que acabamos de seleccionar y obtendré su atributo aria-label.

Adicionalmente: También he realizado una condición para que si no hay ningún elemento que haya sido seleccionado no aparezca undefined... / Elija... y solo aparezca la palabra Elija... para que se vea de una manera mucho más "amigable".

Tu ejemplo modificado:

$('select').select2({
    placeholder: "Elija...",
    allowClear: true,
    ajax: {
    	type: "GET",
        dataType: 'json',
        url: 'https://api.myjson.com/bins/12apr1',
        delay: 250,
        data: function(params) {
            return {
	            term: params.term, // search term
	            page: params.page || 1, //page number
            }
        },
	    processResults: function (data, page) {
	        return {
                results: $.map(data.results, function (n) {
                    return {
                        text: n.text,
                        children: n.children
                    }
                }),
	            //results: data.results,
	            pagination: {
	                more: data.pagination.more,
	            }
	        };
	    },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    templateResult: crear_marca_modelo_formatData,
    templateSelection: crear_marca_modelo_formatDataSelection
});
function crear_marca_modelo_formatData (data) {
	if (data.loading) return data.text;
	return data.text;
}
function crear_marca_modelo_formatDataSelection (data) {
  if(data.element !== undefined){
    if($(".select2-results__option--highlighted").parent().parent().find("[role='group']").prevObject[0]){
         var etiquetaOptGroup = $(".select2-results__option--highlighted").parent().parent().find("[role='group']").prevObject[0].getAttribute("aria-label");
	 return etiquetaOptGroup + " / " + data.text;
    }
  }else{
    let labelOptg = $(data.element).parent().attr('label');
	  return data.text;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>

UPDATE: Según los comentarios el problema está en deseleccionar un elemento que ya ha sido seleccionado ya que da problemas de que no puede obtener el getAttribute de un elemento nulo.

Como tanto para crear como para borrar un elemento del desplegable utiliza la misma función he creado una nueva condición que solo utilice la función getAttribute si el objeto existe para solventar el error:

if(data.element !== undefined){
    if($(".select2-results__option--highlighted").parent().parent().find("[role='group']").prevObject[0]){
         //Aqui obtiene el atributo cuando el objeto existe y lo añade al desplegable
    }
}else{
    //Código cuando data viene como undefined
}

De esta manera solucionaríamos el error. He editado el ejemplo anterior para que se pueda ver que ya no produce ningún error al deseleccionar los elementos del desplegable.

11
  • Gracias por la respuesta amigo, pero me genera unos errores en mi sistema. Tengo 2 select2 en una misma pantalla el primero en un modal para crear (imagen) genera bien el texto pero envia un error; y tengo otro select2 en otro modal para editar items, este me lanza un error que no me permite abrir el modal (imagen). Aclaro, en el ejemplo funciona de maravilla pero en mi sistema no.
    – bypabloc_
    el 5 jun. 2017 a las 6:17
  • @PabloContreras Hola Pablo, entonces deberías poner un ejemplo que sea reproducible y simule tu sistema ya que ahora mismo, tal y como has puesto la pregunta, no podemos saber como lo tienes montado en tu sistema. el 5 jun. 2017 a las 7:12
  • Ok amigo más tarde lo hago
    – bypabloc_
    el 5 jun. 2017 a las 12:16
  • Algo así es la funcionalidad de mi sistema, enlace aquí. En mi sistema al abrir el modal "crear" y seleccionar un item del select2 me lanza un error, pero sin embargo lo selecciona.. En el fiddler no permite deseleccionar.. En el modal "editar" me lanza el mismo error q lanza en mi sistema.
    – bypabloc_
    el 6 jun. 2017 a las 16:41
  • 1
    No entiendo como es que en el fiddler funciona correctamente, pero en mi sistema no funciona del todo bien. Lo dejare así, técnicamente solucionaste en el fiddler el problema. Gracias por la ayuda amigo.
    – bypabloc_
    el 7 jun. 2017 a las 3:33
0

Solo es cuestión de modificar un poco la función del templateSelection, debido a que en la data que recibe la función también contiene un atributo element el cual lo puedes seleccionar con jQuery para posteriormente buscar al padre en este caso <optiongorup>, entonces la función quedaría de la siguiente manera:

function formatDataSelection(data) {
  //Debido a que en data recibimos el elemento seleccionado lo buscamos en el DOM 
  //y posteriormente buscamos el padre
  let labelOptg = $(data.element).parent().attr('label');

  //Para devolver lo que tu deseas hay que guardar la etiqueta del Optiongroup 
  //en una variable y retornamos el resultado esperado
  return labelOptg + " / " + data.text;
}

Tu ejemplo funcionando:

var data = {
  "results": [{
    "text": "LG",
    "children": [{
      "id": 1,
      "text": "Lg - Prueba 1"
    }, {
      "id": 2,
      "text": "Lg - Prueba 2"
    }]
  }, {
    "text": "Samsung",
    "children": [{
      "id": 3,
      "text": "Sam - Prueba 1"
    }, {
      "id": 4,
      "text": "Sam - Prueba 2"
    }]
  }],
  "pagination": {
    "more": false
  }
};


$("select").select2({
  placeholder: "Elija...",
  allowClear: true,
  data: data.results,
  escapeMarkup: function(markup) {
    return markup;
  },
  templateResult: formatData,
  templateSelection: formatDataSelection
})

function formatData(data) {
  if (data.loading) return data.text;
  return data.text;
}

function formatDataSelection(data) {
  //Debido a que en data recibimos el elemento seleccionado lo buscamos en el DOM y posteriormente buscamos el padre
  let labelOptg = $(data.element).parent().attr('label');
  //Para devolver lo que tu deseas hay que gusradar la etiqueta del Optiongroup en una variable y retornamos el resultado esperado
  return labelOptg + " / " + data.text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>

9
  • Para cualquier item que presione me aparecere, ej: "undefined / Lg - Prueba 2". Hago un console.log($(data.element).parent()) y no localizo el atributo label, ¿en que parte debería de estar?. Lo que arroja el console.log despliego "0" y luego "attributes" y salen los siguientes atributos: id, name, style, tabindex, class, aria-hidden y data-fv-field.
    – bypabloc_
    el 11 may. 2017 a las 19:21
  • Lo extraño es que manejo el select con el mismo json pero obviamente traído de una consulta en la db.
    – bypabloc_
    el 11 may. 2017 a las 19:22
  • @PabloContreras ya limpiaste la cache del navegador? con ctrl + shift + r, o bien revisa en consola el optgroup y que tenga ese atributo, es posible que contenga otro que le asigne el nombre
    – JuankGlezz
    el 11 may. 2017 a las 19:34
  • Ya limpie la cache y nada. Ya subo una imagen del html.
    – bypabloc_
    el 11 may. 2017 a las 19:44
  • Acá la imagen del error
    – bypabloc_
    el 11 may. 2017 a las 19:47

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.