combos dependientes jquery + ajax -- problema Haciendo unas pruebas sobre el tema, mi idea es que al hacer click sobre un boton se carguen en un div tres combos dependientes que se actualizan con jquery, pero no me ha cancionado.
Tengo los siguientes codigos:
1. uno.php: este es el codigo de entrada (HTML)
Código 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=utf-8" />
<title>Combos dependientes</title>
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ajax.js"></script>
<script language="javascript">
$(document).ready(function(){
// Parametros para e combo1
$("#combo1").change(function () {
$("#combo1 option:selected").each(function () {
alert($(this).val());
elegido=$(this).val();
$.post("combo1.php", { elegido: elegido }, function(data){
$("#combo2").html(data);
$("#combo3").html("");
});
});
})
// Parametros para el combo2
$("#combo2").change(function () {
$("#combo2 option:selected").each(function () {
//alert($(this).val());
elegido=$(this).val();
$.post("combo2.php", { elegido: elegido }, function(data){
$("#combo3").html(data);
});
});
})
});
</script>
</head>
<body>
<div>
<input type='button' value='Enviar' name='v11' onClick="fDatos('respuesta','estado');">
</div>
<div id="respuesta">
</div>
<div id="estado">
</div>
</body>
</html>
Código PHP:
/*------------------------------------------------------*/
//Función para crear el objeto Ajax. //
/*------------------------------------------------------*/
function nuevoAjax()
{
var xmlhttp=false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function fDatos(id,respuesta)
{
var objTbl = document.getElementById(respuesta);
var objErr = document.getElementById("estado");
var url = "eje.php";
ajax = nuevoAjax();
ajax.open("POST", url, true);
ajax.onreadystatechange = function()
{
switch (ajax.readyState)
{
case 0:
objErr.innerHTML = 'Error 0. No se ha abierto la comunicación.';
break;
case 1:
objErr.innerHTML="<img src='./imagenes/ajax-loader.gif'>";
break;
case 2:
objErr.innerHTML = 'Petición cargada, esperando respuesta del servidor...';
break;
case 3:
objErr.innerHTML = '';
break;
case 4:
if(ajax.status == 200) {
objTbl.innerHTML = ajax.responseText;
}
else
{
objTbl.innerHTML = 'Error 200';
}
break;
}
}
var qString;
qString="accion=registro";
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(qString);
}
Código PHP:
<?
$html = "<table><tr><td>";
$html .= "<select name='combo1' id='combo1'>";
$html .= " <option value='op1_1'>Option1</option>";
$html .= " <option value='op1_2'>Option2</option>";
$html .= " <option value='op1_3'>Option3</option>";
$html .= "</select></td></tr><tr><td>";
$html .= "<select name='combo2' id='combo2'>";
$html .= "</select></td></tr><tr><td>";
$html .= "<select name='combo3' id='combo3>";
$html .= "</select></td></tr></table>";
echo $html;
?> Código PHP:
<?php
$rpta="";
if ($_POST["elegido"]=="op1_1") {
$rpta= '
<option value="op2_1">Option1</option>
<option value="op2_2">Option2</option>
<option value="op2_3">Option3</option>
';
}
if ($_POST["elegido"]=="op1_2") {
$rpta= '
<option value="op2_1">Option21</option>
<option value="op2_2">Option22</option>
<option value="op2_3">Option23</option>
';
}
if ($_POST["elegido"]=="op1_3") {
$rpta= '
<option value="op2_1">Option</option>
<option value="op2_2">Option</option>
';
}
echo $rpta;
?> Código PHP:
<?php
$rpta="";
if ($_POST["elegido"]=="op2_1") {
$rpta= '
<option value="op3_1">Option1</option>
<option value="op3_2">Option2</option>
<option value="op3_3">Option3</option>
';
}
if ($_POST["elegido"]=="op2_2") {
$rpta= '
<option value="op3_1">Option31</option>
<option value="op3_2">Option32</option>
<option value="op3S_3">Option33</option>
';
}
echo $rpta;
?> Al hacer la prueba sin el uso de ajax me funciona bien... el caso es que necesito ponerlo a cancionar de esta manera para una aplicacion que estoy desarrollando en la que en el div de respuesta estoy cargando un formulario y quisiera hacer uso de esto.
Este es el codigo original del que tome como base para hacer esto, es decir, sin hacer uso de ajax
Código 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=utf-8" />
<title>Combos dependientes</title>
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript">
$(document).ready(function(){
// Parametros para e combo1
$("#combo1").change(function () {
$("#combo1 option:selected").each(function () {
//alert($(this).val());
elegido=$(this).val();
$.post("combo1.php", { elegido: elegido }, function(data){
$("#combo2").html(data);
$("#combo3").html("");
});
});
})
// Parametros para el combo2
$("#combo2").change(function () {
$("#combo2 option:selected").each(function () {
//alert($(this).val());
elegido=$(this).val();
$.post("combo2.php", { elegido: elegido }, function(data){
$("#combo3").html(data);
});
});
})
});
</script>
</head>
<body>
<select name="combo1" id="combo1">
<option value="op1_1">Option1</option>
<option value="op1_2">Option2</option>
<option value="op1_3">Option3</option>
</select>
<select name="combo2" id="combo2">
</select>
<select name="combo3" id="combo3">
</select>
</body>
</html>
Un Cordial Saludo
