Foros del Web » Programando para Internet » Javascript »

Listas Dependientes

Estas en el tema de Listas Dependientes en el foro de Javascript en Foros del Web. Vereis necesito enlazar 2 listas de forma dependiente la una de la otra y he encontrado el siguiente código que me puede valer pero me ...
  #1 (permalink)  
Antiguo 20/01/2011, 03:06
 
Fecha de Ingreso: enero-2011
Mensajes: 16
Antigüedad: 13 años, 3 meses
Puntos: 1
Listas Dependientes

Vereis necesito enlazar 2 listas de forma dependiente la una de la otra y he encontrado el siguiente código que me puede valer pero me hace falta que cada una de las ciudades que aparece en la segunda lista tenga un enlace con una determinada direccion web ejemplo:(http://mipagina.com)y necesito un boton para que al seleccionar la ciudad lo pulse y me enlace con la direccion web que corresponde con esa ciudad. Tengo que deciros que mis conocimientos son minimos por eso no utilizo PHP ni bases de datos ni ninguna otra cosa porque el Javascript ya de hecho me desborda.


*****************************************
*****************************************
<!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>Listas desplegables dependientes 2</title>
</head>

<p align="center"><b>Listas desplegables dependientes 2
<script LANGUAGE="JavaScript">


<!-- Begin
var africaArray = new Array("('Selecciona país','',true,true)",
"('Ethiopia')",
"('Somalia')",
"('South Africa')",
"('Other')");
var middleeastArray = new Array("('Select country','',true,true)",
"('Egypt')",
"('Iran')",
"('Israel')",
"('Kuwait')",
"('Other')");
var asiaArray = new Array("('Select country','',true,true)",
"('Armenia')",
"('Bangladesh')",
"('Cambodia')",
"('China')",
"('Other')");
var europeArray = new Array("('Select country','',true,true)",
"('Albania')",
"('Austria')",
"('Belarus')",
"('Belgium')",
"('Other')");
var australiaArray = new Array("('Select country','',true,true)",
"('Australia')",
"('New Zealand')",
"('Other')");
var lamericaArray = new Array("('Select country','',true,true)",
"('Costa Rica')",
"('Cuba')",
"('El Salvador')",
"('Guatemala')",
"('Other')");
var namericaArray = new Array("('Select country','',true,true)",
"('Canada')",
"('USA')",
"('Other')");
var samericaArray = new Array("('Select country','',true,true)",
"('Argentina')",
"('Bolivia')",
"('Brazil')",
"('Chile')",
"('Other')");
function populateCountry(inForm,selected) {
var selectedArray = eval(selected + "Array");
while (selectedArray.length < inForm.country.options.length) {
inForm.country.options[(inForm.country.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + selectedArray[i]);
}
if (inForm.region.options[0].value == '') {
inForm.region.options[0]= null;
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0);
}
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0);
}
}
}
}
}
function populateUSstate(inForm,selected) {
var stateArray = new Array("('Select State','',true,true)",
"('Alabama')",
"('Alaska')",
"('Arizona')",
"('Arkansas')",
"('Wyoming')");
if (selected == 'USA') {
for (var i=0; i < stateArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + stateArray[i]);
}
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0)
}
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0)
}
}
}
}
else {
}
if (selected == 'Other') {
newCountry = "";
while (newCountry == ""){
newCountry=prompt ("Please enter the name of your country.", "");
}
if (newCountry != null) {
inForm.country.options[(inForm.country.options.length-1)]=new Option(newCountry,newCountry,true,true);
inForm.country.options[inForm.country.options.length]=new Option('Other, not listed','Other');
}
}
if(inForm.country.options[0].text == 'Select country') {
inForm.country.options[0]= null;
}
}
// End -->
</script>
</head>

<!-- STEP TWO: Add the last coding to the BODY of your HTML document -->
</b>
<body>

</p>

<center>
<form name="globe">
<p>
<select name="region" onChange="populateCountry(document.globe,document. globe.region.options[document.globe.region.selectedIndex].value)">
<option selected>Selecciona Región</option>
<option value="asia">Asia</option>
<option value="africa">Africa</option>
<option value="australia">Australia</option>
<option value="europe">Europa</option>
<option value="middleeast">Medio Oriente</option>
<option value="lamerica">América Latina</option>
<option value="namerica">América del Norte</option>
<option value="samerica">América del Sur</option>
</select>
<select name="country" onChange="populateUSstate(document.globe,document. globe.country.options[document.globe.country.selectedIndex].text)">
<option value>&lt;--------------------</option>
</select> </p>
</form>
</center>
<p></p>
<center>
<p>&nbsp;</p>
</center>
<p></p>

</body>

</html>

*****************************************
Para explicarme un poco mejor os dire que el código anterior funciona bien pero me falta añadir algo para que realice lo que necesito y ahí esta el problema, necesitaria algo parecido a lo que añado a continuación (que es un trozo del código original anterior):

**********Ejemplo Original******************

var europeArray = new Array("('Select country','',true,true)",
"('Albania')",
"('Austria')",
"('Belarus')",
"('Belgium')",
"('Other')");
*****************************
después de nombre del país preciso un vinculo o enlace externo algo parecido a lo que pongo en los 2 ejemplos que esta a continuación pero que por supuesto estos ejemplos solo son eso y no funcionan.

******2 Ejemplos de algo parecido a lo que necesito (no funcionan)**********

var europeArray = new Array("('Select country','',true,true)",
"('Albania')"(http://www.mipaginaweb.com),
"('Austria')"(http://www.tupaginaweb.com),
"('Belarus')"(http://www.otrapaginaweb.com),
"('Belgium')"(http://www.cuartapaginaweb.com),
"('Other')");
************************************************** **************
O algo parecido a este otro tipo de código:
<option value="http://www.Albania.com">Albania</option>
<option value="http://www.Austria.com">Austria</option>
<option value="http://www.belarus.com">Belarus</option>

***************************************
Pero esto anterior tal cual no funciona en el código que he adjuntado al principio y eso o algo muy parecido es lo que necesito, ¿que debo cambiar y de que manera para que pueda añadirle un enlace parecido a lo expuesto en los ejemplos anteriores?.

Y para finalizar preciso poner un botón tipo (Ir) o (Buscar) para que una vez seleccionado pueda pulsar y ir a ese enlace, porque en el ejemplo que adjunto cuando seleccionas en las 2 listas dependientes el código no hace nada

Gracias por vuestra ayuda:
  #2 (permalink)  
Antiguo 20/01/2011, 14:20
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Listas Dependientes

lee este articulo. sobre todo las secciones Arreglos de literales y Objetos literales
un ejemplo
Cita:
item = [{
pais : 'españa',
email : 'www.url.com'},

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

alert('país: ' +item[0].pais+ ' email: '+item[0].email )
  #3 (permalink)  
Antiguo 20/01/2011, 15:10
 
Fecha de Ingreso: enero-2011
Mensajes: 16
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Listas Dependientes

Gracias por tu respuesta, pero tengo un problema y es que mis conocimientos de Javascript son limitadisimos, lo mio era hasta ahora la programación en Visual Basic, por lo tanto aunque tengo conocimientos de programación lo que he leido en el articulo que me aconsejabas sin la ayuda de alguien que me lo explique me suena a chino, supongo que lo comprenderas, en cuanto al ejemplo de código que me pones en tu respuesta, la verdad supongo que funcionara pero yo necesito algo parecido a esto que te pongo a continuación y ademas preciso un botón para que al hacer la selección en las 2 listas dependientes lo pulse y me lleve a esa URL.
******************************

"('Albania')"(http://www.mipaginaweb.com),
O algo parecido a este otro tipo de código:
<option value="http://www.Albania.com">Albania</option>

*********************************

Quiero agradecerte tu ayuda y esfuerzo y espero que alguien me pueda dar la solución al código que puse al principio cuando realize la consulta.
Gracias a Todos. Un saludo,
  #4 (permalink)  
Antiguo 20/01/2011, 16:10
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Listas Dependientes

un ejemplo mas cercano a lo que te ocupa. estudialo y no entiendes algo pregunta
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
  #5 (permalink)  
Antiguo 22/01/2011, 15:26
 
Fecha de Ingreso: enero-2011
Mensajes: 16
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Listas Dependientes

Gracias por tu ayuda, pero he probado el codigo y solo me aparece 1 de las 2 listas que preciso, osea aparece la lista de los continentes pero no aparece la lista dependiente de los paises y por lo tanto no hace lo que necesito, como ya te dije no conozco casi nada de Javascript y a lo mejor solo precisa una pequeña modificación para que funcione pero yo no la encuentro, si puedes ayudarme te lo agradeceria.

Muchas gracias.
  #6 (permalink)  
Antiguo 22/01/2011, 15:56
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Listas Dependientes

sabes lo peor de todo esto?? que ni tan siquiera te has molestado en probar el código. si seleccionas un continente, te levantará todos los países de ese continente junto con su url. lo que resta es añadir estos valores a las opciones del segundo select
  #7 (permalink)  
Antiguo 22/01/2011, 17:26
Avatar de goteen_mx  
Fecha de Ingreso: abril-2005
Ubicación: D.F.
Mensajes: 403
Antigüedad: 19 años
Puntos: 37
Respuesta: Listas Dependientes

IsabelM tiene razón, este foro es de consulta, no para hacerte el trabajo, te recomiendo que primero trates de aprender.

Te dejo una página donde hay un tutorial muy bueno de html y de js

http://www.w3schools.com/


Saludos.
  #8 (permalink)  
Antiguo 23/01/2011, 03:38
 
Fecha de Ingreso: enero-2011
Mensajes: 16
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Listas Dependientes

Gracias a los dos por vuestra ayuda, pero os dire que no pretendo que nadie me haga el trabajo soy bastante mayorcito para saber que cuando alguien quiere algo tiene que esforzarse para conseguirlo, esa es la filosofia que aplico en mi familia y a mis hijos.
Cuando dices que "lo que resta es añadir estos valores a las opciones del segundo select" eso debe de ser algo tan sencillo para alguien como tu que dominas hasta cierto punto ese lenguaje que entiendes que el hecho de no saber hacer eso es por que la persona que lo pregunta y insiste en que no lo entiende pretende que le hagan el trabajo, pues lo siento no es así y te agradeceria que si me contestas lo hicieras por el motivo que consideres oportuno estare encantado de comunicarme contigo pero por favor no me adjuntes ninguna solución a mi problema, ya lo resolvere de otra forma, no me gusta que nadie me haga el trabajo.
Hasta ahora yo no habia hecho nunca una página web y menos he utilizado el javascript por eso algo tan simple como lo que parece que preguntaba, para mi es chino mandarín.
En cuanto a leerme la página que me sugeris "http://www.w3schools.com/" no me la he leido ya que dispongo de muchos manuales en español y aprender algo que se desconoce partiendo de algo que lees en un idioma que no dominas no es un buen principio, ademas si pudiesemos aprender solo con los manuales incluso los escritos en nuestro propio idioma no existirian ni las facultades ni los profesores, para entender algo es preciso que alguien te lo esplique y te haga razonar o como hacen en algunos paises asiaticos lo desmontas, comprendes su funcionamiento y luego lo copias mejorandolo con nuevos conocimientos.
Os vuelvo a pedir que me disculpeis por preguntar algo que se supone deberia saber simplemente poniendo una parte de mi esfuerzo y no esperando que alguien me lo de hecho.
No obstante si precisais algo relacionado con el diseño que es lo mio, hacermelo saber estare encantado en ayudaros.
Y como es de bien nacido ser agradecido, Muchas gracias.
Un saludo.

Etiquetas: dependientes, listas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:06.