Cargar un select o lista desplegable desde otro select PHP
El siguiente código támbien les puede ser util para mostrar valor segun lista desplegable. Muchos aplausos para el autor, ha sido un gran aporte.
El siguiente código támbien les puede ser util para mostrar valor segun lista desplegable. Muchos aplausos para el autor, ha sido un gran aporte.
Fuente: codigojerry.blogspot.com.es
Para cargar o llenar un select con datos de la base de datos a partir de otro select utilizamos AJAX y el evento onchange de JavaScript. El siguiente ejemplo consta de una base de datos compuesta por dos tablas una llamada continente y otro pais. Cuando se selecciona un continente aparece unos cuantos paises perteneciente a ese continente, para ello las tablas tienen que estar obligatoriamente relacionadas.
El archivo conexion para conectarnos a la base de datos.
conexion.php
1
2
3
4
5
6
7
8
9
10
11
| <?php function conexion(){ $con = mysql_connect( "localhost" , "root" , "" ); if (!$con){ die( 'Could not connect: ' . mysql_error()); } mysql_select_db( "database" , $con); return ($con); } ?> |
Este archivo es la vista al usuario. Contiene el primer select donde cargamos en él los continentes almacenados en la base de datos. Tiene como atributo el evento onchange de JavaScript el cual ejecuta la funcion ajax load() cada vez que se hace clic sobre una opcion (continente).
index.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
| <?php include 'conexion.php' ; ?> <!DOCTYPE html> <html> <head> <script src= "ajax.js" ></script> </head> <body> <h2>HTML - PHP - AJAX - MySQL</h2> <?php $con=conexion(); $res=mysql_query( "select * from continente" ,$con); ?> <select id= "cont" onchange= "load(this.value)" > <option value= "" >Seleccione</option> <?php while ($fila=mysql_fetch_array($res)){ ?> <option value= "<?php echo $fila[codigo]; ?>" ><?php echo $fila[nombre]; ?></option> <?php } ?> </select> <div id= "myDiv" ></div> </body> </html> |
El archivo ajax.js es un archivo javascript el cual contiene la funcion load(), esta cáptura el código del continente seleccionado y se lo envía al archivo proc.php a través de la variable q y con el método post para que lo procese.
ajax.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| function load(str) { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp= new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp= new ActiveXObject( "Microsoft.XMLHTTP" ); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState== 4 && xmlhttp.status== 200 ) { document.getElementById( "myDiv" ).innerHTML=xmlhttp.responseText; } } xmlhttp.open( "POST" , "proc.php" , true ); xmlhttp.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" ); xmlhttp.send( "q=" +str); } |
Finalmente este archivo captura el código del continente para hacer una consulta a la base de datos y mostrar en otro select los paises del continente seleccionado. El resultado se visualiza en el div con id igual a myDiv ubicado en el archivo index.php
proc.php
1
2
3
4
5
6
7
8
9
10
11
| <?php include 'conexion.php' ; $q=$_POST[ 'q' ]; $con=conexion(); $res=mysql_query( "select * from pais where cod_cont=" .$q. "" ,$con); ?> <select> <?php while ($fila=mysql_fetch_array($res)){ ?> <option><?php echo $fila[nombre]; ?></option> <?php } ?> </select> |
Les dejo el enlace de donde lo saqué: https://coudlain.wordpress.com/2013/05/20/cargar-un-select-o-lista-desplegable-desde-otro-select-php-ajax-mysql-by-codigojerry-blogspot-com/