Rellenar <select> con AJAX y JSON

[manuparquegiralda]

A ver te pongo un ejemplo muy secillo para que puedas estrapolarlo. Ten en cuenta que lo he escrito directamente aquí y puede tener errores tipográficos.

Archivo HTML

Código HTML:

<select name="pais">
    <option value="">Selecciona...</option>
    <option value="Francia">Francia</option>
    <option value="España">España</option>
</select>
<select name="provincia">
    <option value="">Selecciona un país</option>
</select>
 

Código Javascript:

var select = document.querySelector( "select[name=pais]" );
select.addEventListener( "change", ( ev ) => {
    var value = ev.currentTarget.value;
    
    // Si no hay valor detenemos.
      
    if( !value ) {
        document.querySelector( "select[name=provincia]" ).innerHTML = '<option value="">Selecciona un país</option>';
        return false;
    }
 
    // Realizamos solicitud por AJAX
 
    var xhr = new XMLHttpRequest();
    var data = new FormData();
 
    data.append( "pais", value );
 
    // Escucha del completado
 
    xhr.addEventListener( "load", ( ev ) => {
        var EVAL = eval;
        var r = xhr.responseText;
        var o = EVAL( "(" + r + ")");
 
        if( o.estado === "OK" ) {
            document.querySelector( "select[name=provincia]" ).innerHTML = o.datos;
        } else {
            console.log( o.error );
        }
    }, false);
 
    // Enviío al script
 
    xhr.open( "POST", "/script.php" );
    xhr.send( data );
});
 

Script.php

Código PHP:

// Creamos objeto de respuesta
 
$RESPONSE = new stdClass();
$RESPONSE->estado = "KO";
$RESPONSE->datos = "";
$RESPONSE->error = "";
 
// Consultamos las provincias en la base de datos.
 
$query = $mysqli->query( "SELECT provincia FROM provincias WHERE pais = '" . $_POST[ "pais" ] . "'" );
 
// Comprobamos el error.
 
if( $mysqli->error ) {
    $RESPONSE->error = $mysqli->error;
    echo json_encode( $RESPONSE );
    die();
}
 
// Creamos los datos con los options.
 
while( $resQuery= $query->fetch_assoc()) {
    $RESPONSE->datos .= '<option value="' . $resQuery[ "provincia" ] . '">' . $resQuery[ "provincia" ] . '</option>';
}
 
// Devolvemos los datos
 
$RESPONSE->estado = "OK";
echo json_encode( $RESPONSE );
 

Como ves es algo muy sencillo. A través de javascript escuchamos cuando cambia el select de "pais". Obtenemos su valor y lo enviamos al script donde extraeremos las provincias del páis.

Obviamente, la estructura de la base de datos me la he inventado y doy por supuesto que sabes crear la conexión con la base de dato.

Después en el script PHP creamos un objeto de respuesta, realizamos la consulta y vamos concatenadno en los datos de la respuesta los inputs. Esto bien lo puedes hacer así o puedes enviar los datos en un array y montar los options en javascript. Eso ya lo decides tú.

En la función que escucha la respuesta AJAX, obtenemos los datos devueltos por el script y los decodificamos y en función del estado de la respuesta hacemos lo que necesitemos.

Espero que te sirva.