5.2.1. Cargar dinámicamente un select con jquery – javascript

Se presentan dos formas distintas de cómo cargar dinámicamente en un campo desplegable de HTML (SELECT) a través de la librería de Javascript JQUERY llamando a un webservice en PHP que extrae los datos de una base de datos MySQL.

Para ello nos basaremos en un ejemplo con dos maneras de cargar el SELECT. En la primera, se carga automáticamente un campo desplegable con los estados de nuestra base de datos MySQL de una forma sencilla con una llamada en AJAX, al seleccionar el estado utilizaremos la segunda forma con la devolución de un objeto JSON desde otro webservice en PHP.

Ejemplo sencillo con una llamada en AJAX

Lo primero que haremos es crear la parte en HTML, hay varias formas de hacerlo pero me he decantado por un DIV que incluye nuestro SELECT

<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Colonias México</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
  <br><br>
  <div class='container'>
    <div class='row'> 
      <div class='col-xs-offset-3 col-xs-6'>
        <SELECT id='Estados' name='Estados'></SELECT>
      </div>
    </div>  
    <br>
    <div class='row'>
      <div class='row col-xs-offset-3 col-xs-6'>
        <SELECT id='Municipios' name='Municipios'></SELECT>
      </div>
    </div>  
    <br>
    <div class='row'>
      <div class='row col-xs-offset-3 col-xs-6'>
        <SELECT id='Colonias' name='Colonias'></SELECT>
      </div>
    </div>  
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='coloniasMexico.js'></script>
</body>
</html>

$(document).ready(function() {
 $('#Estados').load('wsEstados.php', function() {
   var idEstado = $('#Estados').val();
   var url = 'wsMunicipios.php?idEstado='+idEstado;
   $('#Municipios').load(url, function() { 
   var idMunicipio =  $('#Municipios').val();
   var url = 'wsColonias.php?idMunicipio='+idMunicipio;
     $('#Colonias').load(url); 
   });   
 });

  $('#Estados').change(function(event){
    var idEstado = $('#Estados').val();
    var url = 'wsMunicipios.php?idEstado='+idEstado;
    $('#Municipios').load(url, function() { 
    var idMunicipio =  $('#Municipios').val();
    var url = 'wsColonias.php?idMunicipio='+idMunicipio;
      $('#Colonias').load(url); 
    });   
  });     
   
  $('#Municipios').change(function(event){
    var idMunicipio =  $('#Municipios').val();
    var url = 'wsColonias.php?idMunicipio='+idMunicipio;
      $('#Colonias').load(url); 
  });
});
<?php
    include('configdb.php');
  
    $conexion = new mysqli($ruta, $login,$key, $db);
    $sql = 'SELECT * FROM estados ORDER BY estado';
    if ($datos = $conexion->query( $sql )) {
      $html = '';  
      while( $estados = $datos->fetch_array(MYSQL_ASSOC)) {
        $html.= "";
      }
      $datos->close();
      $conexion->close();
    }  
    echo $html;
?>
<?php
    include('configdb.php');
  
    $conexion = new mysqli($ruta, $login,$key, $db);
    $sql = "SELECT * FROM municipios WHERE idEstado = ".$_REQUEST['idEstado']." ORDER BY municipio";
    if ($datos = $conexion->query( $sql )) {
      $html = '';  
      while( $municipios = $datos->fetch_array(MYSQL_ASSOC)) {
        $html.= "";
      }
      $datos->close();
      $conexion->close();
    }  
    echo $html;
?>
<?php
    include('configdb.php');
  
    $conexion = new mysqli($ruta, $login,$key, $db);
    $sql = "SELECT * FROM colonias WHERE idMunicipio = ".$_REQUEST['idMunicipio']." ORDER BY colonia";
    if ($datos = $conexion->query( $sql )) {
      $html = '';  
      while( $colonias = $datos->fetch_array(MYSQL_ASSOC)) {
        $html.= "";
      }
      $datos->close();
      $conexion->close();
    }  
    echo $html;
?>