jueves, 28 de enero de 2016

Actualizar Select (menú desplegable) a partir de otro Select en PHP

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.


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 ejemplo está dividio en cuatro archivos:
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/