Estructuras anidadas con php y jquery

[AlanChavez]

Ok, basicamente necesitas llenar un segundo select con la informacion seleccionada en el primero.

Primero tienes que definir el segundo select en HTML

Código HTML:

<select name="ciudades" id="selectCiudades"></select>
 

Si lo quieres hacer sin recargar la pagina, lo que tienes que hacer es crear un archivo independiente que regrese un objeto JSON, y lo vas a llamar de la siguiente manera en Javascript:

Código Javascript:

$(document).ready(function() {
var select = $('#especialidad');
select.on('change', function(e) {
   $.ajax({
        type: "POST",
        url: "ciudadPorEstado.php",
        data: {estado: select.val()}
    }).done(function(datos) {
         $.each(datos, function(id, nombre) {   
            $('#selectCiudades')
            .append($("<option></option>")
            .attr("value",datos.id)
              .text(datos.nombre);
});
    });
});
});
 

Despues tu archivo ciudadPorEstado.php debe lucir algo asi:

Código PHP:

<?php
 
$estado = $_POST['estado'];
/** aqui haz tu llamada a la base de datos, y llenas un array con la informacion de tu base de datos
     y supongamos que almacenas los resultados de la base de datos en el array $ciudades con las llaves id, y nombre.
     tendrias un array de la siguiente forma:
 
 $ciudades[0]['id']  = 2;
 $ciudades[0]['nombre'] = "Monterrey"
 
 $ciudades[1]['id'] = 3;
 $ciudades[1]['nombre'] = "DF"
 
 $ciudades[2]['id'] = 1;
 $ciudades[2]['nombre'] = "Guadalajara"
**/
 
return json_encode($ciudades);
 

De esa manera puedes llenar un segundo combo box con AJAX, jQuery y PHP.

Obviamente el ejemplo descrito arriba es meramente practico, pero te sirve para dare una idea general de lo que tienes que hacer.