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>