Rellenar SELECT con AJAX y jQuery

Uno de los usos más básicos con AJAX es rellenar combos (SELECT). Pero no por básico dejar de ser a veces complicado.
Lo primero que debemos saber es que las funciones AJAX de jQuery utilizan la codificación UTF-8 tanto para recibir como para enviar datos. Existen mil maneras de pasar los datos con AJAX aunque las más lógicas serían las que utilizan formatos unificados para el tráfico de datos como son XML y JSON. Particularmente a mi me gusta mucho más utilizar JSON pero en Chrome si creamos un objeto JSON a partir de un array numerado el objeto resultante se ordena obviando el orden que se le haya dado previamente.

Rellenando un SELECT con XML

Lo primero que haremos será construir un objeto XML codificado en UTF-8 para ello podemos ayudarnos de funciones como utf8_encode en caso de que los valores vengan codificados en ISO.
Aquí es dejo un ejemplo de un XML
$xml = new XmlWriter();
$xml->openMemory();
$xml->startDocument('1.0', 'UTF-8');
$xml->startElement("select");
$contenido = array();
foreach ($contenido as $dato => $valor) {
      $xml_response->startElement("data");
      $xml_response->writeElement("value", $dato);
      $xml_response->writeElement("text", $valor);
      $xml_response->endElement();
}
$xml_response->endElement();
$xml_response->endDocument();
echo $xml_response->outputMemory(true);

Procesamos el XML

$.ajax({
 type: "POST",
 url: "ruta_generar_xml.php",
 data: "variable_post="+valor_variable,
 async: true,
 contentType: "application/x-www-form-urlencoded",
 dataType: "xml",
 success: function(xml){
  $(xml).find(“data).each(function(){
   var object = $(this);
   var v = object.find(“value”).text();
   var t = object.find(“text”).text();
   $('<option/>').val(v).text(t).appendTo(combo);
  });
 }
});

Rellenando el SELECT con JSON

Supongamos que tenemos un array en PHP llamado $data, con la mezcla de las funciones json_encode y array_map podemos hacer un JSON codificado en UTF-8, ejemplo:
echo json_encode(array_map(“utf8_encode”, $data));

El procesamiento en JavaScript es más sencillo:
$.each(json, function(v, o){
 $('<option/>').val(v).text(o).appendTo(combo);
});

Otras cosas interesantes que pueden hacernos falta es borrar los OPTION de un SELECT dejando el primero por ejemplo y ordenar un SELECT con JavaScript.

Borrar el contenido de un SELECT con JavaScript y jQuery

$('#combo option:gt(0)').remove();

NOTA: con la opción gt( 0 ) lo que estamos diciendo es que borre todos los options menos el primero.

Ordenar un SELECT con jQuery

function OrdenaSelect(id){
 var s = $('#' + id);
 var o = s.children('option:gt(0)').get();
 o.sort(function(a, b) {
  var i = $(a).text().toUpperCase();
  var j = $(b).text().toUpperCase();
  return (i < j) ? -1 : (i > j) ? 1 : 0;
 })
 $.each(o, function(a, b) { 
  s.append(b);
 });
}

Espero que este pequeño tutorial de como gestionar select con jQuery y rellenar su contenido con AJAX os sirva de ayuda.

Comentarios

Sergio ha dicho que…
Hola, soy nuevo en esto, pero no entendi, puedes hacer un ejemplo completo?