Ver Mensaje Individual
  #3 (permalink)  
Antiguo 07/07/2011, 08:53
Avatar de fernandaYO
fernandaYO
 
Fecha de Ingreso: mayo-2011
Ubicación: Medellin
Mensajes: 166
Antigüedad: 13 años
Puntos: 4
Respuesta: combobox dependientes con php y ajax

Cita:
Iniciado por Melecio Ver Mensaje
hay te va ub ejemplo esta largo y espero que te sirva yo utilizo 3 combobox chekalo
------------------------------------
ajax.php
---------------
<?php include "conexion.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<script>
//hacer que funcione con diferentes navegadores
function requerir(){
try{
req=new XMLHttpRequest();
}catch(err1){
try{
req=new ActiveXObject("Microsoft.XMLHTTP");
}catch(err2){
try{
req=new ActiveXObject("Msxml2.XMLHTTP");
}catch(err3){
req= false;
}
}
}
return req;
}


var peticion=requerir();

function llamarAjaxGETpro(){
var aleatorio=parseInt(Math.random()*999999999);
valor=document.getElementById("departamento").valu e;
var url="provincia.php?valor="+valor+"&r="+aleatorio;
peticion.open("GET",url,true);
peticion.onreadystatechange =respuestaAjaxpro;
peticion.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
peticion.send(null);
}

function llamarAjaxGETdis(){
var aleatorio=parseInt(Math.random()*999999999);
valor=document.getElementById("provincia").value;
var url="distrito.php?valor="+valor+"&r="+aleatorio;
peticion.open("GET",url,true);
peticion.onreadystatechange =respuestaAjaxdis;
peticion.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
peticion.send(null);
}

function respuestaAjaxpro(){

if(peticion.readyState==4){
if(peticion.status==200){
//alert(peticion.responseText);
document.getElementById("pro").innerHTML=peticion. responseText;
}else{
alert("ha ocurrido un error"+peticion.statusText);
}
}
}
function respuestaAjaxdis(){

if(peticion.readyState==4){
if(peticion.status==200){
//alert(peticion.responseText);
document.getElementById("dis").innerHTML=peticion. responseText;
}else{
alert("ha ocurrido un error"+peticion.statusText);
}
}
}

</script>

<body>
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" id="form1">
<div id="dep" style="width:150px; float:left">
<select name="departamento" id="departamento" onchange="llamarAjaxGETpro()">
<option>seleccione depart.</option>
<?php
$re=mysql_query("select * from tb_departamento");
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_dep'].'">'.$f['det_dep'].'</option>';
}
?>
</select>
</div>
<div id="pro" style="width:150px; float:left">
<select disabled="disabled">
<option>seleccione provincia</option>
</select>
</div>
<div id="dis" style="width:150px; float:left">
<select name="select3" id="select3" disabled="disabled">
<option>seleccione distrito</option>
</select>
</div>
</form>

</body>
</html>


conexion.php
------------------------
<?php
mysql_connect("localhost","root","")or die(mysql_error());
mysql_select_db("test")or die(mysql_error());
?>

distrito.php
---------------------------
<?php
include "conexion.php";
$valor=$_GET['valor'];
$re=mysql_query("select * from tb_distrito where id_pro='$valor' ");
echo'<select id="distrito" >';
echo'<option >seleccione distrito</option>';
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_dis'].'">'.$f['det_dis'].'</option>';
}
echo'</select>';
?>

provincia.php

-------------

<?php
include "conexion.php";
$valor=$_GET['valor'];
$re=mysql_query("select * from tb_provincia where id_dep='$valor' ");
echo'<select id="provincia" onchange=llamarAjaxGETdis()>';
echo'<option >seleccione provincia</option>';
while($f=mysql_fetch_array($re)){
echo'<option value="'.$f['id_pro'].'">'.$f['det_pro'].'</option>';
}

echo'</select>';
?>


bd test
---------------
Navicat MySQL Data Transfer

Source Server : localhost_3306
Source Server Version : 50508
Source Host : localhost:3306
Source Database : test

Target Server Type : MYSQL
Target Server Version : 50508
File Encoding : 65001

Date: 2011-03-20 19:43:49
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `tb_departamento`
-- ----------------------------
DROP TABLE IF EXISTS `tb_departamento`;
CREATE TABLE `tb_departamento` (
`id_dep` varchar(2) NOT NULL DEFAULT '',
`det_dep` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_dep`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_departamento
-- ----------------------------
INSERT INTO `tb_departamento` VALUES ('1', 'dep1');
INSERT INTO `tb_departamento` VALUES ('2', 'dep2');

-- ----------------------------
-- Table structure for `tb_distrito`
-- ----------------------------
DROP TABLE IF EXISTS `tb_distrito`;
CREATE TABLE `tb_distrito` (
`id_pro` int(3) DEFAULT NULL,
`id_dis` int(3) NOT NULL,
`det_dis` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_dis`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_distrito
-- ----------------------------
INSERT INTO `tb_distrito` VALUES ('1', '1', 'dis1');
INSERT INTO `tb_distrito` VALUES ('1', '2', 'dis2');
INSERT INTO `tb_distrito` VALUES ('2', '3', 'dis3');
INSERT INTO `tb_distrito` VALUES ('2', '4', 'dis4');
INSERT INTO `tb_distrito` VALUES ('3', '5', 'dis5');
INSERT INTO `tb_distrito` VALUES ('3', '6', 'dis6');
INSERT INTO `tb_distrito` VALUES ('4', '7', 'dis7');
INSERT INTO `tb_distrito` VALUES ('4', '8', 'dis8');

-- ----------------------------
-- Table structure for `tb_provincia`
-- ----------------------------
DROP TABLE IF EXISTS `tb_provincia`;
CREATE TABLE `tb_provincia` (
`id_dep` int(3) DEFAULT NULL,
`id_pro` int(3) NOT NULL DEFAULT '0',
`det_pro` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id_pro`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of tb_provincia
-- ----------------------------
INSERT INTO `tb_provincia` VALUES ('1', '1', 'pro1');
INSERT INTO `tb_provincia` VALUES ('1', '2', 'pro2');
INSERT INTO `tb_provincia` VALUES ('2', '3', 'pro3');
INSERT INTO `tb_provincia` VALUES ('2', '4', 'pro4');


Gracias por tu pronta respuesta!

pero me gustaria que me instruyeras un poco, por que con esto no sabria que cambiar ni nada, me facilito un poco, por ejemplo:
var url="provincia.php?valor="+valor+"&r="+aleatorio; el provincia.php, pues es un archivo php, pero que debe tener? o solo lo esta creando

Cita:
if(peticion.readyState==4){
if(peticion.status==200){
qeu significa el 4 y el 200? para que?

es todo
__________________
Umm, infraccion :(//