Como llenar un select dependiente con Ajax en php

| 24 marzo, 2017 | JQuery/Javascript, php | 2 comentarios

Las aplicaciones web modernas llevan a una tendencia a utilizar mucho Javascript ya que posee muchas funciones que hacen de la navegación una mejor experiencia para el usuario.

Una de las funciones más utilizadas en Ajax ya que permite mostrar información dinámica sin que el usuario deba dejar la hoja que esta viendo en ese momento.

Esta vez les quiero mostrar un ejemplo sencillo de como llenar un select dependiente de otro, para esto también vamos a utilizar la librería JQuery.

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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;

 

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
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?php
require_once './con_db.php'; //libreria de conexion a la base
 
$con = conDb();
if(!$con){
  die("<br/>Sin conexi&oacute;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&oacute;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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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&oacute;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 codigo 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; ?>

Este es un ejemplo sencillo, al final el ejemplo es como esto:

Espero que sean explicatorios los comentarios que hago en el código, si hay dudas por aqui estoy.

CODIGO FUENTE

Etiquetas:

Entradas relacionadas

Sobre el Autor

hug0

Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla

2 comentarios
  1. Kerith Responder

    Excelente còdigo, aunque tengo una duda, estoy utilizando una Base de Datos en SQLsrv ¿como serìa la siguiente lìnea en sql? Se realiza con un fetch_array?

    $filas = mysqli_fetch_all($query, MYSQLI_ASSOC);

  2. Hbl Responder

    Hola, disculpa la pregunta ¿Tú escribías en un blog llamado Garabatos Linux?

Deja un comentario