2

Quiero cargar mi select en donde muestro los programas registrados y cargar en otro select las asignaturas asociadas al programa que escogi inmediantamente estoy trabajando con la base de datos php myadmin (Cabe aclarar que aun no lo he hecho porque no se como realizarlo)

Acontinuacion el codigo de las consultas

<?php 
include_once("configuracionbd.php");
 $consultaPrograma =mysqli_query($mysqli,"SELECT * FROM programa ORDER BY id_programa");
 $consultaAsignatura = mysqli_query($mysqli,"SELECT * FROM asignatura ORDER BY id_asignatura");
?>

Y el codigo de como estoy cargando los select vuelvo y aclaro, esta forma de cargarlos aún no me proporcionan lo que estoy buscando

    <div class="form-group">
        <label for="selector1" class="col-sm-2 control-label">Programa: </label>
        <div class="col-sm-8"><select name="codPrograma" id="selector1" class="form-control1">
    <option value="000">Seleccione</option>
     <?php
       while ($row=mysqli_fetch_array($consultaPrograma)) {?>
<option value="<?php echo $row['id_programa']?>"><?php echo $row['nombre_programa']?></option>
<?php } ?>
?>
</select></div>
</div> 
    <div class="form-group">
        <label for="selector1" class="col-sm-2 control-label">Asignatura</label>
            <div class="col-sm-8"><select name="codAsignatura" id="" class="form-control1">
       <option value="000">Seleccione</option>
         <?php
           while ($row=mysqli_fetch_array($consultaAsignatura)) {?>
                                            <option value="<?php echo $row['id_asignatura']?>"><?php echo $row['nombre_asignatura']?></option>
<?php } ?>
?></select></div>
</div>
2
  • 1
    Para lograr lo que quieres, necesitas usar Ajax.
    – alanfcm
    Commented el 29 oct. 2018 a las 14:47
  • Utiliza eventos con jQuery (change). Commented el 29 oct. 2018 a las 15:16

2 respuestas 2

6

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&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
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 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; ?>

introducir la descripción de la imagen aquí

Espero que te sirva para entender el proceso y aplicarlo a tu proyecto. Saludos!

1
  • Muchas gracias, voy a implementarlo para ver si me funciona, gracias por responder Commented el 29 oct. 2018 a las 15:27
0

Hola estoy implementando este ejemplo pero quiero que en el primer select tome el nombre para value y para la vista html ya que el nombre es el que comparó en where para el segundo select pero no me da ninguna opción en el segundo select. alguien me puede orientar es justamente el mismo codigo no se si sea que el id es numérico y el nombre es string intente declarar la variable bandas como string de la siguiente manera pero no funciona. var banda_id = new String(" "); banda_id = $(this).val(); Gracias de antemano.

1
  • 2
    La zona de respuestas no es espacio para hacer preguntas o comentarios, por favor lee Cómo preguntar y abre una nueva pregunta
    – user75901
    Commented el 10 abr. 2019 a las 17:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.