Skip to main content
1 de 2
bypabloc_
  • 1.9k
  • 15
  • 46
  • 102

¿Como uso el modo ajax de select2 con <optgroup> and <option>?

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.

bypabloc_
  • 1.9k
  • 15
  • 46
  • 102