pasar datos de un combo a otro

soportetecnico06 · #1 (**permalink**) 13/02/2014, 11:50

Buen dia a todos

tengo un problema estoy haciendo una pagina la cual contiene dos select y lo que quiero que aga es lo siguiente

cuando le eligan la opcion del primer combo que auntomaticamente cargen las opciones al segundo combo con forme la informacion que estaba en el primer combo

haber si me explico mejor con este ejemplo

tengo dos combos en el primero tengo los continentes america europa asia africa oceania
yo quiero por decir cuando le den clic en europa en el segundo combo aparescan los paises solamente de europa

de america solo los paises de america

siento que solo me falta cualquier cosa pero ya tengo 3 dias y nada que me funciona alguien me puede ayudar

les dejo mi archivo php con el codigo que tengo espero alguien me ayudeeeeeeee les dejo mi codigo y por fa diganme que me falta

saludos y gracias

<?php

if($conn_access = odbc_connect ( "proyecto", "proapoyo", "mln2909"))

$ssql = "select * from estados";
if($rs_access = odbc_exec ($conn_access, $ssql))

$cveEdo=$_REQUEST['estados'];

//QUERY PARA LA EXTRACCION DE DATOS MUNICIPIOS (5)
$ssql2 = "select * from dbo.c2 where nombre = $cveEdo";
if($rs_access = odbc_exec ($conn_access, $ssql))

?>

session_start();
<!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>
<style type="text/css">

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ProApoyo</title>
<style type="text/css">
#apDiv1 {
position: absolute;
width: 732px;
height: 558px;
z-index: 1;
left: 299px;
top: 71px;
}
#apDiv12 { position: absolute;
width: 195px;
height: 20px;
z-index: 1;
left: 498px;
top: 45px;
}
#apDiv13 { position: absolute;
width: 67px;
height: 22px;
z-index: 2;
left: 658px;
top: 45px;
}
#apDiv14 { position: absolute;
width: 141px;
height: 23px;
z-index: 3;
left: 742px;
top: 45px;
}
#apDiv15 { position: absolute;
width: 115px;
height: 26px;
z-index: 4;
left: 857px;
top: 45px;
}
#apDiv3 { position: absolute;
width: 100px;
height: 620px;
z-index: 1;
left: 0px;
top: 8px;
}
#apDiv4 { position: absolute;
width: 527px;
height: 115px;
z-index: 1;
left: -2px;
top: 586px;
}
#apDiv16 { position: absolute;
width: 244px;
height: 115px;
z-index: 4;
left: 109px;
top: 3px;
}
#apDiv23 {
position: absolute;
width: 48px;
height: 44px;
z-index: 5;
left: 1109px;
top: 39px;
}
#apDiv2 {
position: absolute;
width: 200px;
height: 115px;
z-index: 5;
}
#apDiv5 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
left: 1135px;
top: 621px;
}
</style>
<link href="jQuery/css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv10 { position: absolute;
width: 789px;
height: 42px;
z-index: 3;
left: 417px;
top: 2px;
}
#apDiv17 {position: absolute;
width: 67px;
height: 22px;
z-index: 1;
left: 68px;
top: 10px;
}
#apDiv18 {position: absolute;
width: 73px;
height: 19px;
z-index: 2;
left: 288px;
top: 10px;
}
#apDiv19 {position: absolute;
width: 87px;
height: 20px;
z-index: 5;
left: 159px;
top: 10px;
}
#apDiv20 {position: absolute;
width: 101px;
height: 21px;
z-index: 3;
left: 405px;
top: 10px;
}
#apDiv21 {position: absolute;
width: 90px;
height: 18px;
z-index: 4;
left: 534px;
top: 10px;
}
#apDiv22 {position: absolute;
width: 253px;
height: 18px;
z-index: 5;
left: 659px;
top: 11px;
}
#apDiv6 {
position: absolute;
width: 200px;
height: 115px;
z-index: 5;
left: 1153px;
top: 631px;
}
#apDiv7 {
position: absolute;
width: 46px;
height: 43px;
z-index: 6;
left: 650px;
top: 244px;
}
#apDiv8 {
position: absolute;
width: 47px;
height: 48px;
z-index: 7;
left: 705px;
top: 279px;
}
#apDiv9 {
position: absolute;
width: 33px;
height: 31px;
z-index: 8;
left: 690px;
top: 351px;
}
#apDiv24 {
position: absolute;
width: 44px;
height: 44px;
z-index: 6;
left: 1164px;
top: 39px;
}
#apDiv11 {
position: absolute;
width: 293px;
height: 129px;
z-index: 9;
left: 1044px;
top: 115px;
}
</style>
<script src="includes/jquery-1.4.2.js" type="text/javascript"></script>
<script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></script>
<script type="text/xml">

</script>
</head>

<body>
<div id="apDiv1"><img src="fotos/mex.jpg" width="800" height="600" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="poly" coords="370,130" href="#" />
<area shape="poly" coords="337,152" href="#" />
<area shape="poly" coords="333,152,331,159,327,166,327,171,326,179,32 8,186,329,194,332,203,335,207,335,216,335,229,335, 239,341,244,349,243,353,238,359,235,365,235,370,23 8,374,242,379,243,385,244,389,247,393,249,396,249, 397,244,397,238,402,235,408,233,407,227,397,221,39 5,217,393,211,390,205,395,202,400,195,396,191,395, 189,398,184,404,183,409,176,412,172,409,166,405,16 1,401,153,398,149,392,145,388,141,384,136,379,133, 379,131,377,131,371,131,367,131,357,131,354,132,33 9,147,346,139" href="sucursalescoah.html" />
<area shape="poly" coords="417,180,421,187,424,193,426,202,433,207,43 7,211,445,210,447,213,449,219,449,229,453,224,446, 231,442,232,436,236,433,242,429,244,426,247,426,25 8,430,263,423,265,418,272,417,275,407,279,405,275, 405,254,403,252,400,249,399,238,401,235,405,234,40 8,230,408,227,404,225,402,222,396,214,391,207,391, 204,393,202,399,200,400,197,401,192,400,190,396,18 9,397,185,404,181,407,178,409,175" href="sucursalesnl.html" />
<area shape="poly" coords="399,254,393,256,391,259,388,263,383,266,37 9,271,375,273,371,273,370,275,364,277,362,277,363, 284,365,289,368,292,374,293,377,294,383,293,385,29 3,385,297,385,306,384,311,385,312,388,313,392,315, 397,318,403,319,409,319,413,317,416,318,420,320,42 5,320,425,318,431,318,435,315,437,315,439,317,442, 323,445,324,450,323,452,315,452,307,455,303,453,29 7,449,297,443,298,441,299,438,296,435,294,432,292, 430,291,424,292,424,293,421,291,419,287,417,283,41 5,282,410,281,408,281,405,279,405,276,404,271,405, 267,405,261,403,259,401,257" href="sucursalslp.html" />
</map>
</div>
<div id="apDiv11">
<p>BUSQUEDA POR ESTADO</p>
<form name="form1" >
Selecciona tu Estado:
<br>
<br>

<select name="estados" onChange="this.form.submit()">
<option value="<?php echo $cveEdo?>" selected>Estado</option>

<?php while($row=odbc_fetch_array($rs_access))
{?>
<option value=""<?php echo $cveEdo?>"> <?php echo htmlentities($row['Nombre']);?></option>
<?php } ?>
</select>
<br>
<br>
Selecciona tu Municipio:
<br>
<br>
<select name="municipios" >
<option value="<?php echo $cveEdo?>" selected>Municipio</option>

<?php while($rs_access = odbc_fetch_array ($conn_access, $ssql2))
{?>
<option value="" <?php echo htmlentities($row2['nombre']);?></option>
<?php } ?>
</select>
<br>
<br>
<input type="submit" name="enviar" value="Enviar" /><br /><br />
</form>
<p> </p>

</div>
<div id="apDiv3"><img src="fotos/vd.jpg" width="86" height="649" />
<div id="apDiv4"><img src="fotos/buenas.jpg" width="1262" height="113" />
<div id="apDiv23"><a href="https://www.facebook.com/pages/ProApoyo/131417977029136"><img src="fotos/face.png" width="45" height="44" /></a></div>
<div id="apDiv24"><a href="http://www.twitter.com/@proapoyo"><img src="fotos/twiteer.jpg" width="45" height="44" /></a></div>
<div id="apDiv14"><font color="#000000" size="2" face="Calibri"><strong><a href="ligasdeinteres.html"><font color="#000000">Ligas de inter&eacutes</font></a></div>
<div id="apDiv15"><font color="#000000" size="2" face="Calibri"><strong>Empleados</strong></font></div>
<div id="apDiv12"><font color="#000000" size="2" face="Calibri"><strong>T&eacuterminos y Condiciones</strong></font></div>
<div id="apDiv13"><strong><a href= "C:\Users\Hector\Desktop\nueva\fotos\ap.pdf">< font color="#000000" face="Calibri" size="2">Privacidad</a></strong></div>
</div>
</div>
<div id="apDiv16"><img src="fotos/LOGOPROAPOYO.jpg" alt="" width="193" height="90" /></div>
<div id="apDiv10"><img src="fotos/sess.jpg" alt="" width="896" height="43" />
<div id="apDiv22"><font color="#FFFFFF" size="3" face="Calibri"><a href="bolsadetrabajo.html"><font color="#FFFFFF" face="Calibri">BOLSA DE TRABAJO</font></a></div>
<div id="apDiv21"><font color="#FFFFFF" size="3" face="Calibri"><a href="contacto.html"><font color="#FFFFFF" face="Calibri">CONTACTO</font></a></div>
<div id="apDiv20"><font color="#FFFFFF" size="3" face="Calibri"><a href="sucursales.html"><font color="#FFFFFF" face="Calibri">SUCURSALES</font></a></div>
<div id="apDiv17"><font color="#FFFFFF" size="3" face="Calibri"><a href="inicio.html"></a><font color="#FFFFFF" face="Calibri">INICIO</font></div>
<div id="apDiv18"><font color="#FFFFFF" size="3" face="Calibri"><a href="misionvisionyvalores.html"><font color="#FFFFFF" face="Calibri">NOSOTROS</font></a></div>
<div id="apDiv19"><font color="#FFFFFF" size="3" face="Calibri"><a href="productos.html"><font color="#FFFFFF" face="Calibri">PRODUCTOS</font></a></div>
</div>
<div id="apDiv7"><img src="fotos/transpa.png" width="30" height="30" /></div>
<div id="apDiv8"><img src="fotos/transpa.png" width="30" height="30" /></div>
<div id="apDiv9"><img src="fotos/transpa.png" width="30" height="30" /></div>
</body>
</html>

hhs · #2 (**permalink**) 13/02/2014, 11:55

Eso lo puedes hacer con Selects dependientes, te dejo un articulo con un ejemplo sencillo que usa jquery, php y mysql para la solución:
http://www.9lessons.info/2010/08/dyn...box-using.html

Alexis88 · #3 (**permalink**) 13/02/2014, 12:08

Yo lo haría con Ajax:

Código HTML:

Ver originalContinentes:
<select id = "continentes">
    <option = 0>Seleccione un continente</option>
    <option = 1>África</option>
    <option = 2>América</option>
    <option = 3>Asia</option>
    <option = 4>Europa</option>
    <option = 5>Oceanía</option>
</select>
 
Países:
<div id = "p"></div>

En el mismo documento, hago referencia al archivo JS en donde haré la petición asíncrona:

Código Javascript:

Ver original$("#continentes").change(function(){
    if ($(this).val() > 0){
        $.ajax({
            url: "paises.php",
            data: "continente=" + $(this).val(),
            success: function(response){
                $("#p").html(response);
            }
        });
    }
});

Y en el archivo paises.php:

Código PHP:

Ver original<?php
$continente = $_GET["continente"];
$query = mysql_query("SELECT * FROM paises WHERE id_continente = $continente");
if (mysql_num_rows($query)){
?>
    <select id = "paises">
<?php
    while ($row = mysql_fetch_array($query)){
?>
        <option value = "<?php echo $row["id"]; ?>"><?php echo $row["nombre_pais"]; ?></option>
<?php
    }
?>
    </select>
<?php
    mysql_free_result($query);
}
else{
    echo "No se encontraron países coincidentes con el continente seleccionado";
}

Básicamente, cuando elijas un continente de la lista, enviarás al archivo paises.php el código de dicho continente, lo buscarás en la tabla de los países en la BD y si se encuentran datos que le correspondan (países relacionados al continente seleccionado), mostramos un combo al que cargaremos con los países encontrados para el continente seleccionado. Finalmente, esto es insertado en el Div de Id "p" que se encuentra en el primer archivo, en el que también está el combo de los continentes.

Estoy utilizando la extensión MySQL para que sea más comprensible la explicación, pero te recomiendo que empieces usar la extensión MySQLi pues la anterior ya no se recomienda seguir utilizándola pues será eliminada en futuras versiones de PHP.

Ten en cuenta que para este ejemplo, hago uso de la librería jQuery de JavaScript, por lo que te sugiero que la incluyas en tu documento de esta forma:

Código HTML:

Ver original<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>

Saludos