Cambiar el <select> deacuerdo a un radio

axel_7384 · #1 (**permalink**) 27/11/2007, 11:28

gente una duda!
Como dice el tema...

Yo tengo el sgte codigo que encontré en internet:

<form name="formulario" method="post" action="">
<div align="center">Usa
<input name="paises" type="radio" OnClick="cambiar()" value="1" checked>
España
<input name="paises" type="radio" OnClick="cambiar()" value="2">
<br>
Ciudad
<select name="ciudades">
<option value="1" selected>Miami</option>
<option value="2">New York</option>
<option value="3">Boston</option>
</select>
</div>
</form>

<script language="JavaScript">
function cambiar()
{
if(document.forms.formulario.paises[0].checked) pais1(); // USA
if(document.forms.formulario.paises[1].checked) pais2(); // ESPAÑA
}

function pais1(){
opcion0=new Option("Miami","1","defauldSelected");
opcion1=new Option("New York","2");
opcion2=new Option("Boston","3");

document.forms.formulario.ciudades.options[0]=opcion0;
document.forms.formulario.ciudades.options[1]=opcion1;
document.forms.formulario.ciudades.options[2]=opcion2;
}

function pais2(){
opcion0=new Option("Madrid","1","defauldSelected");
opcion1=new Option("Malaga","2");
opcion2=new Option("Cadiz","3");

document.forms.formulario.ciudades.options[0]=opcion0;
document.forms.formulario.ciudades.options[1]=opcion1;
document.forms.formulario.ciudades.options[2]=opcion2;
}

</script>

y me va chevere funciona!
Pero ahora sucede que me di cuenta que funciona porque son 3 listados y en la 2da opcion tb son 3 listados; sin embargo cuando le agrego 2 opciones más a uno de las opciones, esto ya no funciona bien.
Por ejemplo:

function pais1(){
opcion0=new Option("Miami","1","defauldSelected");
opcion1=new Option("New York","2");
opcion2=new Option("Boston","3");
opcion3=new Option("pollo1","4");
opcion4=new Option("pollo2","5");

document.forms.formulario.ciudades.options[0]=opcion0;
document.forms.formulario.ciudades.options[1]=opcion1;
document.forms.formulario.ciudades.options[2]=opcion2;
document.forms.formulario.ciudades.options[3]=opcion3;
document.forms.formulario.ciudades.options[4]=opcion4;
}

Le he agregado "pollo1" y "pollo2" entonces cuando elija la 2da opcion, va a chancar los 3 primeros elementos de la lista y va a mostrar los 2 ultimos de la lista anterior, y eso es malo!

Me pregunto como haría para poder mostrar solo aquellos que debo mostrar y no las sobras de la antigua lista.

Espero haberme explicado bien.
Saludos

dantrech · #2 (**permalink**) 27/11/2007, 12:07

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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script language="JavaScript">
function cambiar()
{
if(document.forms.formulario.paises[0].checked) pais1(); // USA
if(document.forms.formulario.paises[1].checked) pais2(); // ESPAÑA
}

function pais1(){
for(var i = 0 ; i <document.forms.formulario.ciudades.length ; i++)
    document.forms.formulario.ciudades.options[i]=null;
    
opcion0=new Option("Miami","1","defauldSelected");
opcion1=new Option("New York","2");
opcion2=new Option("Boston","3");
opcion3=new Option("pollo1","4");
opcion4=new Option("pollo2","5");

document.forms.formulario.ciudades.options[0]=opcion0;
document.forms.formulario.ciudades.options[1]=opcion1;
document.forms.formulario.ciudades.options[2]=opcion2;
document.forms.formulario.ciudades.options[3]=opcion3;
document.forms.formulario.ciudades.options[4]=opcion4;
}

function pais2(){
for(var i = 0 ; i <document.forms.formulario.ciudades.length ; i++)
    document.forms.formulario.ciudades.options[i]=null;

opcion0=new Option("Madrid","1","defauldSelected");
opcion1=new Option("Malaga","2");
opcion2=new Option("Cadiz","3");

document.forms.formulario.ciudades.options[0]=opcion0;
document.forms.formulario.ciudades.options[1]=opcion1;
document.forms.formulario.ciudades.options[2]=opcion2;
}
</script>
</head>
<body>
<form name="formulario" method="post" action="">
<div align="center">Usa
<input name="paises" type="radio" OnClick="cambiar()" value="1" checked>
Espa&ntilde;a
<input name="paises" type="radio" OnClick="cambiar()" value="2">
<br>
Ciudad
<select name="ciudades">
<option value="1" selected>Miami</option>
<option value="2">New York</option>
<option value="3">Boston</option>
<option value="4">pollo1</option>
<option value="5">pollo2</option>
</select>
</div>
</form>
</body>
</html>

2 cosas:

1.-

Código PHP:

  document.forms.formulario.ciudades.options[i]=null;

deja el select vacío.

2.- En el select de cuidad, tienes que agregar las opciones del que está por defecto.

Código PHP:

  <option value="4">pollo1</option>
<option value="5">pollo2</option>

Aunque creo que si se cargaras el select automático, te ahorras el paso 2.

axel_7384 · #3 (**permalink**) 27/11/2007, 14:56

yupiii gracias! ya me ha salido :p

dantrech · #4 (**permalink**) 27/11/2007, 14:59

me alegra escuchar eso ^^