Los campos de selección dependiente se utilizan para rellenar automaticamente información en una lista desplegable. Basándose en la selección desplegable, los datos dependientes se recuperan de la base de datos y se muestran en el siguiente cuadro de selección. Es frecuente que estos campos dependientes se usan para desplegar información de los estados o provincias de cada país
Veamos los archivos necesarios comenzando por la conexión a la base de datos dbConfig.php
<?php
//Database credentials
$dbHost = 'localhost';
$dbUsername = 'dbUser';
$dbPassword = 'dbPassword';
$dbName = 'dbName';
//Connect and select the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
mysqli_set_charset($db, 'utf-8');
if ($db->connect_error) {
die("Error de Conexion: " . $db->connect_error);
}
El archivo de inicio index.php y el script js que se ingresa dentro de la etiqueta <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#region').on('change',function(){
var regionID = $(this).val();
if(regionID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'region_id='+regionID,
success:function(html){
$('#provincia').html(html);
$('#comuna').html('<option value="">Select comuna</option>');
}
});
}else{
$('#provincia').html('<option value="">Select region</option>');
$('#comuna').html('<option value="">Select comuna</option>');
}
});
$('#provincia').on('change',function(){
var provinciaID = $(this).val();
if(provinciaID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'provincia_id='+provinciaID,
success:function(html){
$('#comuna').html(html);
}
});
}else{
$('#comuna').html('<option value="">Select comuna</option>');
}
});
});
</script>
Bien esto lo he dejado como muestra de como se inicia la configuración del sitio web para obtener un select desplegable con Ajax PHP y MySQL, en los siguientes link dejo la demostración funcionando. Además la posibilidad de descargar el código incluyendo la base de datos con un pequeño aporte a través de PayPal
Demostración y el acceso para la descarga
• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Usar PDO para conectarse a MYSQL
• Cómo detectar el navegador usando JavaScript
• Cómo desarmar un notebook HP Compaq Presario C700
• Proyecto Intranet: Ordenes de servicio y ventas
• Michelles Jaque
• Beatriz Cabrera Zapata
• Mini Poesías - Constanza Gonzales
• Sobre las decisiones - Constanza Gonzales
• Enviar correos usando un formulario desde sitio web o localhost con PHPMailer
• Cómo crear un cuadro de búsqueda al estilo Google
• Sistema de LogIn con verificación de email y recuperación de contraseña usando PHP
• Demostración Jquery UI Selectable usando php y bases de datos mysql
• Subir, insertar, actualizar, borrar imágenes con PHP y MySQL
• Calculadora IMC usando JavaScript
• Select Dependientes con Ajax MySQL PHP
• Expresiones regulares en PHP
• Cómo convertir datos MySQL en formato JSON en PHP
• Visualizar datos en una tabla html con mysqli
• Siembras: Aplicación en Laravel 5.5