Combo que rellena información a otro combo

trincha · #1 (**permalink**) 21/03/2011, 05:12

Hola.
Me gustaría hacer un combo o "select" de un país que cuando lo seleccionas te sale en otro combo "select" las ciudades. Pero además, quería añadir un input que el usuario una vez que ha está en el select de ciudades vaya escribiéndolas y le vaya apareciendo debajo del mismo input donde el usuario escribe. Me gustaría hacerlo con Javascript.
Alguien tiene una idea de como hacerlo?
Gracias

IsaBelM · #2 (**permalink**) 21/03/2011, 05:40

depende de lo que uses. si usas matrices, lo puedes hacer en javascript, pero si usas registros que están en una bd, has de usar ajax

trincha · #3 (**permalink**) 21/03/2011, 05:49

Cita:

Iniciado por IsaBelM

depende de lo que uses. si usas matrices, lo puedes hacer en javascript, pero si usas registros que están en una bd, has de usar ajax

Buenas si, es hacerlo con matrices. Y me gustaría saber como es posible realizarlo.
Muchas gracias!

IsaBelM · #4 (**permalink**) 21/03/2011, 08:47

este código es sólo a modo de ejemplo. en el se usa objetos en lugar de matrices, yo lo veo más conveniente

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Documento sin título</title>
<script type="text/javascript">
item = [ europa = [
{pais : 'españa',
email : 'www.url.com'},

{pais : 'portugal',
email : 'www.url.com'}
],

africa = [
{pais: 'marruecos',
email : 'www.url.com'},

{pais: 'congo',
email : 'www.url.com'},

{pais: 'tunez',
email : 'www.url.com'}
],

america = [
{pais : 'mejico',
email : 'www.url.com'},

{pais : 'honduras',
email : 'www.url.com'},

{pais : 'argentina',
email : 'www.url.com'},

{pais : 'brasil',
email : 'www.url.com'},
]
]

function fnc(it) {
for (var i = 0; i < item[it].length; i++) {
alert('país: ' +item[it][i].pais+ ' email: '+item[it][i].email);
}
}
</script>
</head>
<body>
<form>
<select onchange="fnc(this.selectedIndex)">
<option value="">europa</option>
<option value="">áfrica</option>
<option value="">america</option>
</select>
</body>
</html>

para crear nuevas opciones usa el constructor new Option()

trincha · #5 (**permalink**) 21/03/2011, 10:12

Cita:

Iniciado por IsaBelM

este código es sólo a modo de ejemplo. en el se usa objetos en lugar de matrices, yo lo veo más conveniente

para crear nuevas opciones usa el constructor new Option()

Gracias! pero para poder usar un input que cuando vayas escribiendo te muestre el pais suyo? es decir, si seleccionas europa y en el input pones "es" que salga debajo del input el item españa, como debería hacerlo esto?
gracias nuevamente.

IsaBelM · #6 (**permalink**) 21/03/2011, 16:29

como sería muy largo de explicar y, como he sido yo sólita quien se he metido en esto, te dejo este código

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Documento sin título</title>
<script type="text/javascript">
item = [ africa = [
{pais: 'marruecos',
email : 'www.url.com'},

{pais: 'congo',
email : 'www.url.com'},

{pais: 'mauritania',
email : 'www.url.com'}
],

america = [
{pais : 'mejico',
email : 'www.url.com'},

{pais : 'bolivia',
email : 'www.url.com'},

{pais : 'argentina',
email : 'www.url.com'},

{pais : 'brasil',
email : 'www.url.com'},
],

europa = [
{pais : 'españa',
email : 'www.url.com'},

{pais : 'portugal',
email : 'www.url.com'},

{pais : 'estonia',
email : 'www.url.com'}
]
]

var almacena = [];
function fnc(it) {
if (almacena.length) almacena.splice(0,almacena.length);
var itemxpaises = [];
for (var i = 0; i < item[it].length; i++) {
itemxpaises.push({pais2: item[it][i].pais, email2: item[it][i].email});
if(itemxpaises.length) {almacena.push(itemxpaises);}
}
}

function fnc2(val) {
var objItems = document.getElementById('paises');
if (!val.length) {objItems.innerHTML = ''; return;}
objItems.innerHTML = '';
for (var i = 0; i < almacena.length; i++) {
if (almacena[0][i].pais2.substr(almacena[0][i].pais2.toUpperCase().indexOf(val.toUpperCase()), val.length).toUpperCase() == val.toUpperCase()){
objItems.innerHTML += almacena[0][i].pais2 + ' - ' + almacena[0][i].email2 + '<br />';
}
}
}
</script>
</head>
<body>
<form>
<p>Elije un continente
<select onchange="fnc(this.selectedIndex)">
<option value="">áfrica</option>
<option value="">america</option>
<option value="">europa</option>
</select>
</p>
<p>Escribe un país
<input type="text" id="txt" name="txt" onkeyup="fnc2(this.value)" />
<div id="paises"></div>
</p>
</body>
</html>