Hola a tod@s,
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>
2. ajax.js: El codigo para hacer el llamado con el metodo post al php que arma los combos dependientes para ser visualizado y trabajado
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);
}
3. eje.php: Este es elcodigo que arma los combos dependientes y envia la respuesta a ajax.js
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;
?>
4. combo1: codigo que actualiza los combos 2 y 3 de acuerdo con lo seleccionado en el combo 1
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;
?>
5. combo2.php: Codigo que actualiza el combo 3 de acuerdo con lo seleccionado en elcombo 2
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;
?>
Efectivamente, este codigo me devuelve los combos pero al hacer alguna seleccion en el combo 1 no me actualiza el combo 2.
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>
Agradezco de antemano la ayuda que puedan brindarme
Un Cordial Saludo