Problemilla con Javascript
Necesito que al seleccionar una opción de un desplegable, por ejemplo Madrid, me aparezcan en el siguiente desplegable los pueblos de la ciudad seleccionada y sin acceder a BD con PHP.
Gracias de antemano!
Gracias de antemano!
1 Respuesta
Respuesta de jl81
1
Aquí tienes un ejemplo que te puede ayudar, copialo y ejecútalo como html.
<head><title></title></head><FORM name="form1">
<table border="0">
<select name="lista1" onChange="enviar(this.options.selectedIndex)">
<option selected>----->opcion1</option>
<option>Madrid</option>
<option>Barcelona</option>
</select>
<select name="lista2" onChange="enviar(this.options.selectedIndex)">
<option value=" " selected> </option>
</select><script>
<!--
var vlista3=document.form1.lista1.options.length
var vlista2=new Array(vlista3)
for (i=0; i<vlista3; i++)
vlista2=new Array()
vlista2[0][0]=new Option("---->opcion2"," ");
vlista2[1][0]=new Option("selecciones un Pueblo en Madrid"," ");
vlista2[1][1]=new Option("pueblo1 madrid");
vlista2[1][2]=new Option("pueblo2 madrid");
vlista2[1][3]=new Option("pueblo3 madrid");
vlista2[2][0]=new Option("selecciones un Pueblo en Barcelona"," ");
vlista2[2][1]=new Option("pueblo1 barcelona");
vlista2[2][2]=new Option("pueblo2 barcelona ");
var var3=document.form1.lista2
function enviar(var2)
{
for (var1=var3.options.length-1;var1>0;var1--)
var3.options[var1]=null
for (var4=0;var4<vlista2[var2].length;var4++){
var3.options[var4]=new Option(vlista2[var2][var4].text,vlista2[var2][var4].value)
}
}
//--></script></table>
</FORM>
<head><title></title></head><FORM name="form1">
<table border="0">
<select name="lista1" onChange="enviar(this.options.selectedIndex)">
<option selected>----->opcion1</option>
<option>Madrid</option>
<option>Barcelona</option>
</select>
<select name="lista2" onChange="enviar(this.options.selectedIndex)">
<option value=" " selected> </option>
</select><script>
<!--
var vlista3=document.form1.lista1.options.length
var vlista2=new Array(vlista3)
for (i=0; i<vlista3; i++)
vlista2=new Array()
vlista2[0][0]=new Option("---->opcion2"," ");
vlista2[1][0]=new Option("selecciones un Pueblo en Madrid"," ");
vlista2[1][1]=new Option("pueblo1 madrid");
vlista2[1][2]=new Option("pueblo2 madrid");
vlista2[1][3]=new Option("pueblo3 madrid");
vlista2[2][0]=new Option("selecciones un Pueblo en Barcelona"," ");
vlista2[2][1]=new Option("pueblo1 barcelona");
vlista2[2][2]=new Option("pueblo2 barcelona ");
var var3=document.form1.lista2
function enviar(var2)
{
for (var1=var3.options.length-1;var1>0;var1--)
var3.options[var1]=null
for (var4=0;var4<vlista2[var2].length;var4++){
var3.options[var4]=new Option(vlista2[var2][var4].text,vlista2[var2][var4].value)
}
}
//--></script></table>
</FORM>
Si tuvieses algún problema aqui hay una actualizacion al ejemplo anterior.
<HTML><HEAD><META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE></HEAD><BODY>
<form name="form1">
<p><select name="lista1" onChange="enviar(this.options.selectedIndex)">
<option selected>Escoja una cuidad</option>
<option>Madrid</option>
<option>Barcelona</option></select>
<select name="lista2"></select> </p><script>
<!--
var vlista3=document.form1.lista1.options.length
var vlista2=new Array(vlista3)
for (j=0; j<vlista3; j++)
vlista2[j]=new Array()
vlista2[0][0]=new Option("Escoja un pueblo")
vlista2[0][1]=new Option("Opcion1")
vlista2[0][2]=new Option("Opcion2")
vlista2[1][0]=new Option("Pueblo1 Madrid")
vlista2[1][1]=new Option("Pueblo2 Madrid")
vlista2[2][0]=new Option("Pueblo1 Barcelona")
vlista2[2][1]=new Option("Pueblo2 Barcelona")
vlista2[2][2]=new Option("Pueblo3 Barcelona")
vlista2[2][3]=new Option("Pueblo4 Barcelona")
var var1=document.form1.lista2
function enviar(var2){
for (var3=var1.options.length-1;var3>0;var3--)
var1.options[var3]=null
for (j=0;j<vlista2[var2].length;j++){
var1.options[j]=new Option(vlista2[var2][j].text,vlista2[var2][j].value)
}
var1.options[0].selected=true
}
function lanzar(){
location=var1.options[var1.selectedIndex].value
}//--></script></form></BODY></HTML>
<HTML><HEAD><META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE></HEAD><BODY>
<form name="form1">
<p><select name="lista1" onChange="enviar(this.options.selectedIndex)">
<option selected>Escoja una cuidad</option>
<option>Madrid</option>
<option>Barcelona</option></select>
<select name="lista2"></select> </p><script>
<!--
var vlista3=document.form1.lista1.options.length
var vlista2=new Array(vlista3)
for (j=0; j<vlista3; j++)
vlista2[j]=new Array()
vlista2[0][0]=new Option("Escoja un pueblo")
vlista2[0][1]=new Option("Opcion1")
vlista2[0][2]=new Option("Opcion2")
vlista2[1][0]=new Option("Pueblo1 Madrid")
vlista2[1][1]=new Option("Pueblo2 Madrid")
vlista2[2][0]=new Option("Pueblo1 Barcelona")
vlista2[2][1]=new Option("Pueblo2 Barcelona")
vlista2[2][2]=new Option("Pueblo3 Barcelona")
vlista2[2][3]=new Option("Pueblo4 Barcelona")
var var1=document.form1.lista2
function enviar(var2){
for (var3=var1.options.length-1;var3>0;var3--)
var1.options[var3]=null
for (j=0;j<vlista2[var2].length;j++){
var1.options[j]=new Option(vlista2[var2][j].text,vlista2[var2][j].value)
}
var1.options[0].selected=true
}
function lanzar(){
location=var1.options[var1.selectedIndex].value
}//--></script></form></BODY></HTML>
