Siguiendo la documentación intento lo siguiente:
var data = {
"results": [
{
"text": "Life Good",
"children": "[{\"id\" : 1, \"text\" : \"Lg Prueba 1\", \"element\" : \"HTMLOptionElement\"}, {\"id\" : 2, \"text\" : \"Lg Prueba 2\", \"element\" : \"HTMLOptionElement\"}]",
"elment": HTMLOptGroupElement
},
{
"text": "Samsung",
"children": "[{\"id\" : 3, \"text\" : \"Samsung Prueba 1\", \"element\" : \"HTMLOptionElement\"}, {\"id\" : 4, \"text\" : \"Samsung Prueba 2\", \"element\" : \"HTMLOptionElement\"}]",
"elment": HTMLOptGroupElement
}
],
"pagination": {
"more": false
}
};
$("select").select2({
placeholder: "Elija...",
allowClear: true,
data: data.results,
templateResult: function (data) {
// We only really care if there is an element to pull classes from
if (!data.element) {
return data.text;
}
var $element = $(data.element);
var $wrapper = $('<span></span>');
$wrapper.addClass($element[0].className);
$wrapper.text(data.text);
return $wrapper;
}
});
<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>
Pero no me muestra los hijos, los cuales son reflejados en el json
como children
.
Acá un ejemplo de lo que quiero pero no es con ajax.