Para lograr hacerlo debes hacer uso de Ajax
. Te dejo un ejemplo de como se hace.
Empecemos por crear las dos tablas que vamos a utilizar, en una tengo unas bandas de rock y en la otra algunos discos que pertenecen a las bandas.
(MySQL)
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
CREATE TABLE IF NOT EXISTS `bandas` (
`id` int(11) NOT NULL,
`nombre` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
INSERT INTO `bandas` (`id`, `nombre`) VALUES
(1, 'Metallica'),
(2, 'Sabaton'),
(3, 'Freedom Call'),
(4, 'Stratovarius');
CREATE TABLE IF NOT EXISTS `discos` (
`id` int(11) NOT NULL,
`banda_id` int(11) NOT NULL,
`nombre` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
INSERT INTO `discos` (`id`, `banda_id`, `nombre`) VALUES
(1, 1, 'Kill''em All'),
(2, 1, 'Master Of Puppets'),
(3, 1, 'Metallica'),
(4, 2, 'The Last Stand'),
(5, 2, 'Heroes'),
(6, 2, 'Primo Victoria'),
(7, 3, 'Master Of Light'),
(8, 3, 'Beyond'),
(9, 3, 'Ages Of Light'),
(10, 4, 'Eternal'),
(11, 4, 'Polaris'),
(12, 4, 'Infinite');
ALTER TABLE `bandas`
ADD PRIMARY KEY (`id`);
ALTER TABLE `discos`
ADD PRIMARY KEY (`id`), ADD KEY `discos_r01_idx` (`banda_id`);
ALTER TABLE `bandas`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5;
ALTER TABLE `discos`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=13;
ALTER TABLE `discos`
ADD CONSTRAINT `discos_r01` FOREIGN KEY (`banda_id`) REFERENCES `bandas` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION;
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
CREATE TABLE IF NOT EXISTS `bandas` (
`id` int(11) NOT NULL,
`nombre` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
INSERT INTO `bandas` (`id`, `nombre`) VALUES
(1, 'Metallica'),
(2, 'Sabaton'),
(3, 'Freedom Call'),
(4, 'Stratovarius');
CREATE TABLE IF NOT EXISTS `discos` (
`id` int(11) NOT NULL,
`banda_id` int(11) NOT NULL,
`nombre` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
INSERT INTO `discos` (`id`, `banda_id`, `nombre`) VALUES
(1, 1, 'Kill''em All'),
(2, 1, 'Master Of Puppets'),
(3, 1, 'Metallica'),
(4, 2, 'The Last Stand'),
(5, 2, 'Heroes'),
(6, 2, 'Primo Victoria'),
(7, 3, 'Master Of Light'),
(8, 3, 'Beyond'),
(9, 3, 'Ages Of Light'),
(10, 4, 'Eternal'),
(11, 4, 'Polaris'),
(12, 4, 'Infinite');
ALTER TABLE `bandas`
ADD PRIMARY KEY (`id`);
ALTER TABLE `discos`
ADD PRIMARY KEY (`id`), ADD KEY `discos_r01_idx` (`banda_id`);
ALTER TABLE `bandas`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5;
ALTER TABLE `discos`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=13;
ALTER TABLE `discos`
ADD CONSTRAINT `discos_r01` FOREIGN KEY (`banda_id`) REFERENCES `bandas` (`id`) ON
Ahora vamos a crear 3 archivos php, uno será solo para la conexión con la base de datos, un index.php y otro get_discos.php donde obtendremos las opciones del segundo select.
con_db.php
<?php
function conDb(){
$con = mysqli_connect('localhost', 'root', '', 'tutoriales-kiuvox');
if(!$con){
print_r(mysqli_connect_error());
return false;
}else{
$con->set_charset("utf8");
return $con;
}
}
<?php
function conDb(){
$con = mysqli_connect('localhost', 'root', '', 'tutoriales-kiuvox');
if(!$con){
print_r(mysqli_connect_error());
return false;
}else{
$con->set_charset("utf8");
return $con;
}
}
Index.php
$con = conDb();
if(!$con){
die("<br/>Sin conexión.");
}
/*obtenemos los datos del primer select*/
$sql = "select * from bandas";
$query = mysqli_query($con, $sql);
$filas = mysqli_fetch_all($query, MYSQLI_ASSOC);
mysqli_close($con);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Select Ajax</title>
</head>
<body>
<label>Bandas</label>
<select id="bandas">
<option value="">- Seleccione -</option>
<?php foreach ($filas as $op): //llenar las opciones del primer select ?>
<option value="<?= $op['id'] ?>"><?= $op['nombre'] ?></option>
<?php endforeach; ?>
</select>
<br/><br/>
<label>Discos</label>
<select id="discos" disabled="">
<option value="">- Seleccione -</option>
</select>
<br/><br/>
Opción seleccionada: <span style="font-weight: bold;" id="disco_sel"></span>
<!-- Agregamos la libreria Jquery -->
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<!-- Iniciamos el segmento de codigo javascript -->
<script type="text/javascript">
$(document).ready(function(){
var discos = $('#discos');
var disco_sel = $('#disco_sel');
//Ejecutar accion al cambiar de opcion en el select de las bandas
$('#bandas').change(function(){
var banda_id = $(this).val(); //obtener el id seleccionado
if(banda_id !== ''){ //verificar haber seleccionado una opcion valida
/*Inicio de llamada ajax*/
$.ajax({
data: {banda_id:banda_id}, //variables o parametros a enviar, formato => nombre_de_variable:contenido
dataType: 'html', //tipo de datos que esperamos de regreso
type: 'POST', //mandar variables como post o get
url: 'get_discos.php' //url que recibe las variables
}).done(function(data){ //metodo que se ejecuta cuando ajax ha completado su ejecucion
discos.html(data); //establecemos el contenido html de discos con la informacion que regresa ajax
discos.prop('disabled', false); //habilitar el select
});
/*fin de llamada ajax*/
}else{ //en caso de seleccionar una opcion no valida
discos.val(''); //seleccionar la opcion "- Seleccione -", osea como reiniciar la opcion del select
discos.prop('disabled', true); //deshabilitar el select
}
});
//mostrar una leyenda con el disco seleccionado
$('#discos').change(function(){
$('#disco_sel').html($(this).val() + ' - ' + $('#discos option:selected').text());
});
});
</script>
</body>
</html>
get_discos.php
<?php
require_once './con_db.php'; //libreria de conexion a la base
$banda_id = filter_input(INPUT_POST, 'banda_id'); //obtenemos el parametro que viene de ajax
if($banda_id != ''){ //verificamos nuevamente que sea una opcion valida
$con = conDb();
if(!$con){
die("<br/>Sin conexión.");
}
/*Obtenemos los discos de la banda seleccionada*/
$sql = "select id, nombre from discos where banda_id = ".$banda_id;
$query = mysqli_query($con, $sql);
$filas = mysqli_fetch_all($query, MYSQLI_ASSOC);
mysqli_close($con);
}
/**
* Como notaras vamos a generar código `html`, esto es lo que sera retornado a `ajax` para llenar
* el combo dependiente
*/
?>
<option value="">- Seleccione -</option>
<?php foreach($filas as $op): //creamos las opciones a partir de los datos obtenidos ?>
<option value="<?= $op['id'] ?>"><?= $op['nombre'] ?></option>
<?php endforeach; ?>
Espero que te sirva para entender el proceso y aplicarlo a tu proyecto. Saludos!