· 7 years ago · Nov 08, 2018, 12:02 AM
1<?php
2include_once("configuracionbd.php");
3 $consultaPrograma =mysqli_query($mysqli,"SELECT * FROM programa ORDER BY id_programa");
4 $consultaAsignatura = mysqli_query($mysqli,"SELECT * FROM asignatura ORDER BY id_asignatura");
5?>
6
7<div class="form-group">
8 <label for="selector1" class="col-sm-2 control-label">Programa: </label>
9 <div class="col-sm-8"><select name="codPrograma" id="selector1" class="form-control1">
10 <option value="000">Seleccione</option>
11 <?php
12 while ($row=mysqli_fetch_array($consultaPrograma)) {?>
13<option value="<?php echo $row['id_programa']?>"><?php echo $row['nombre_programa']?></option>
14<?php } ?>
15?>
16</select></div>
17</div>
18 <div class="form-group">
19 <label for="selector1" class="col-sm-2 control-label">Asignatura</label>
20 <div class="col-sm-8"><select name="codAsignatura" id="" class="form-control1">
21 <option value="000">Seleccione</option>
22 <?php
23 while ($row=mysqli_fetch_array($consultaAsignatura)) {?>
24 <option value="<?php echo $row['id_asignatura']?>"><?php echo $row['nombre_asignatura']?></option>
25<?php } ?>
26?></select></div>
27</div>
28
29SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
30SET time_zone = "+00:00";
31
32CREATE TABLE IF NOT EXISTS `bandas` (
33 `id` int(11) NOT NULL,
34 `nombre` varchar(50) NOT NULL
35) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
36
37INSERT INTO `bandas` (`id`, `nombre`) VALUES
38(1, 'Metallica'),
39(2, 'Sabaton'),
40(3, 'Freedom Call'),
41(4, 'Stratovarius');
42
43CREATE TABLE IF NOT EXISTS `discos` (
44 `id` int(11) NOT NULL,
45 `banda_id` int(11) NOT NULL,
46 `nombre` varchar(50) NOT NULL
47) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
48
49INSERT INTO `discos` (`id`, `banda_id`, `nombre`) VALUES
50(1, 1, 'Kill''em All'),
51(2, 1, 'Master Of Puppets'),
52(3, 1, 'Metallica'),
53(4, 2, 'The Last Stand'),
54(5, 2, 'Heroes'),
55(6, 2, 'Primo Victoria'),
56(7, 3, 'Master Of Light'),
57(8, 3, 'Beyond'),
58(9, 3, 'Ages Of Light'),
59(10, 4, 'Eternal'),
60(11, 4, 'Polaris'),
61(12, 4, 'Infinite');
62
63
64ALTER TABLE `bandas`
65 ADD PRIMARY KEY (`id`);
66
67ALTER TABLE `discos`
68 ADD PRIMARY KEY (`id`), ADD KEY `discos_r01_idx` (`banda_id`);
69
70
71ALTER TABLE `bandas`
72 MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5;
73ALTER TABLE `discos`
74 MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=13;
75
76ALTER TABLE `discos`
77ADD CONSTRAINT `discos_r01` FOREIGN KEY (`banda_id`) REFERENCES `bandas` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION;
78
79SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
80SET time_zone = "+00:00";
81
82CREATE TABLE IF NOT EXISTS `bandas` (
83 `id` int(11) NOT NULL,
84 `nombre` varchar(50) NOT NULL
85) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
86
87INSERT INTO `bandas` (`id`, `nombre`) VALUES
88(1, 'Metallica'),
89(2, 'Sabaton'),
90(3, 'Freedom Call'),
91(4, 'Stratovarius');
92
93CREATE TABLE IF NOT EXISTS `discos` (
94 `id` int(11) NOT NULL,
95 `banda_id` int(11) NOT NULL,
96 `nombre` varchar(50) NOT NULL
97) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
98
99INSERT INTO `discos` (`id`, `banda_id`, `nombre`) VALUES
100(1, 1, 'Kill''em All'),
101(2, 1, 'Master Of Puppets'),
102(3, 1, 'Metallica'),
103(4, 2, 'The Last Stand'),
104(5, 2, 'Heroes'),
105(6, 2, 'Primo Victoria'),
106(7, 3, 'Master Of Light'),
107(8, 3, 'Beyond'),
108(9, 3, 'Ages Of Light'),
109(10, 4, 'Eternal'),
110(11, 4, 'Polaris'),
111(12, 4, 'Infinite');
112
113
114ALTER TABLE `bandas`
115 ADD PRIMARY KEY (`id`);
116
117ALTER TABLE `discos`
118 ADD PRIMARY KEY (`id`), ADD KEY `discos_r01_idx` (`banda_id`);
119
120
121ALTER TABLE `bandas`
122 MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5;
123ALTER TABLE `discos`
124 MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=13;
125
126ALTER TABLE `discos`
127ADD CONSTRAINT `discos_r01` FOREIGN KEY (`banda_id`) REFERENCES `bandas` (`id`) ON
128
129<?php
130
131function conDb(){
132 $con = mysqli_connect('localhost', 'root', '', 'tutoriales-kiuvox');
133
134 if(!$con){
135 print_r(mysqli_connect_error());
136 return false;
137 }else{
138 $con->set_charset("utf8");
139 return $con;
140 }
141}
142
143
144<?php
145
146function conDb(){
147 $con = mysqli_connect('localhost', 'root', '', 'tutoriales-kiuvox');
148
149 if(!$con){
150 print_r(mysqli_connect_error());
151 return false;
152 }else{
153 $con->set_charset("utf8");
154 return $con;
155 }
156}
157
158$con = conDb();
159if(!$con){
160 die("<br/>Sin conexión.");
161}
162
163/*obtenemos los datos del primer select*/
164$sql = "select * from bandas";
165$query = mysqli_query($con, $sql);
166$filas = mysqli_fetch_all($query, MYSQLI_ASSOC);
167mysqli_close($con);
168?>
169<!DOCTYPE html>
170<html>
171 <head>
172 <meta charset="UTF-8">
173 <title>Select Ajax</title>
174 </head>
175 <body>
176 <label>Bandas</label>
177 <select id="bandas">
178 <option value="">- Seleccione -</option>
179 <?php foreach ($filas as $op): //llenar las opciones del primer select ?>
180 <option value="<?= $op['id'] ?>"><?= $op['nombre'] ?></option>
181 <?php endforeach; ?>
182 </select>
183
184 <br/><br/>
185 <label>Discos</label>
186 <select id="discos" disabled="">
187 <option value="">- Seleccione -</option>
188 </select>
189
190 <br/><br/>
191 Opción seleccionada: <span style="font-weight: bold;" id="disco_sel"></span>
192
193 <!-- Agregamos la libreria Jquery -->
194 <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
195
196 <!-- Iniciamos el segmento de codigo javascript -->
197 <script type="text/javascript">
198 $(document).ready(function(){
199 var discos = $('#discos');
200 var disco_sel = $('#disco_sel');
201
202 //Ejecutar accion al cambiar de opcion en el select de las bandas
203 $('#bandas').change(function(){
204 var banda_id = $(this).val(); //obtener el id seleccionado
205
206 if(banda_id !== ''){ //verificar haber seleccionado una opcion valida
207
208 /*Inicio de llamada ajax*/
209 $.ajax({
210 data: {banda_id:banda_id}, //variables o parametros a enviar, formato => nombre_de_variable:contenido
211 dataType: 'html', //tipo de datos que esperamos de regreso
212 type: 'POST', //mandar variables como post o get
213 url: 'get_discos.php' //url que recibe las variables
214 }).done(function(data){ //metodo que se ejecuta cuando ajax ha completado su ejecucion
215
216 discos.html(data); //establecemos el contenido html de discos con la informacion que regresa ajax
217 discos.prop('disabled', false); //habilitar el select
218 });
219 /*fin de llamada ajax*/
220
221 }else{ //en caso de seleccionar una opcion no valida
222 discos.val(''); //seleccionar la opcion "- Seleccione -", osea como reiniciar la opcion del select
223 discos.prop('disabled', true); //deshabilitar el select
224 }
225 });
226
227
228 //mostrar una leyenda con el disco seleccionado
229 $('#discos').change(function(){
230 $('#disco_sel').html($(this).val() + ' - ' + $('#discos option:selected').text());
231 });
232
233 });
234 </script>
235 </body>
236</html>
237
238<?php
239require_once './con_db.php'; //libreria de conexion a la base
240
241$banda_id = filter_input(INPUT_POST, 'banda_id'); //obtenemos el parametro que viene de ajax
242
243if($banda_id != ''){ //verificamos nuevamente que sea una opcion valida
244 $con = conDb();
245 if(!$con){
246 die("<br/>Sin conexión.");
247 }
248
249 /*Obtenemos los discos de la banda seleccionada*/
250 $sql = "select id, nombre from discos where banda_id = ".$banda_id;
251 $query = mysqli_query($con, $sql);
252 $filas = mysqli_fetch_all($query, MYSQLI_ASSOC);
253 mysqli_close($con);
254}
255
256/**
257 * Como notaras vamos a generar código `html`, esto es lo que sera retornado a `ajax` para llenar
258 * el combo dependiente
259 */
260?>
261
262<option value="">- Seleccione -</option>
263<?php foreach($filas as $op): //creamos las opciones a partir de los datos obtenidos ?>
264<option value="<?= $op['id'] ?>"><?= $op['nombre'] ?></option>
265<?php endforeach; ?>