Actualizar unos selects

Ember · #1 (**permalink**) 07/03/2005, 02:56

Buenos días. Os explico rápidamente lo que quiero hacer. Tengo el siguiente código:

<html>
<head>
<script type="text/javascript">

audi=['A2','A3','A4','A6','A8','TT','S4','S6','RS6','Cab rio','Allroad quattro'];
audia2=['A2 1.2 TDI','A2 1.4'];
audia3=['A3 1.6 Attraction','A3 1.6 Ambition'];
bmw=['Serie 1','Serie 3','Serie 5','Serie 6','Serie 7','X3','X5','Z4'];
bmws1=['116i','120i'];

</script>
</head>
<body>
<form name="frm">
Marca: <select name="dias" id="dias">
<option>Marca a elegir</option>
<option>Audi</option>
<option>BMW</option>
</select>
<br><br>
Modelo: <select name="elmes" id="elmes">
<option>Modelo a elegir</option>
</select>
<br><br>
Coche: <select name="coche" id="coche">
<option>Coche a elegir</option>
</select>
</form>
</body>
</html>

Pretengo lo siguiente. Al seleccionar en el primer select una de las dos marcas, el segundo select se actualiza y pone los modelos de la marca. Una vez seleccionamos un modelo, se actualiza el tercer select y pone los coches que hay en ese modelo. No sé si es fácil o difícil lo que pretendo. Agradezco cualquier tipo de ayuda al respecto. Muchas gracias

jam1138 · #2 (**permalink**) 07/03/2005, 03:14

Quizá la FAQ#1 te sirva.. ¿ya la haz visto?

Ember · #3 (**permalink**) 07/03/2005, 03:46

Lo he estado mirando y es bastante útil, muchas gracias, aunque no sé cómo hacer para que me actualice el tercer select.

<html>
<head>
<title>

</title>
<script language="JavaScript">

function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}

function cambia(oCntrl){
while (oCntrl.length) oCntrl.remove(0);
switch (document.frm.pais.selectedIndex){
case 1:
addOpt(oCntrl, 0, "A2", "0");
addOpt(oCntrl, 1, "A3", "1");
addOpt(oCntrl, 2, "A4", "2");
addOpt(oCntrl, 3, "A6", "3");
addOpt(oCntrl, 4, "A8", "4");
addOpt(oCntrl, 5, "TT", "5");
addOpt(oCntrl, 6, "S4", "6");
addOpt(oCntrl, 7, "S6", "7");
addOpt(oCntrl, 8, "RS6", "8");
addOpt(oCntrl, 9, "Cabrio", "9");
addOpt(oCntrl, 10, "Allroad quattro", "10");
break;
case 2:
addOpt(oCntrl, 0, "Serie 1", "0");
addOpt(oCntrl, 1, "Serie 3", "1");
addOpt(oCntrl, 2, "Serie 5", "2");
addOpt(oCntrl, 3, "Serie 6", "3");
addOpt(oCntrl, 4, "Serie 7", "4");
addOpt(oCntrl, 5, "X3", "5");
addOpt(oCntrl, 6, "X5", "6");
addOpt(oCntrl, 7, "Z4", "7");
break;
}
}

</script>
</head>
<body>
<form name="frm">
<table border="0">
<tr>
<td>
Marca
</td>
<td>
<select name="pais" onchange="cambia(document.frm.ciudad)">
<option value="Mar">Marca a elegir</option>
<option value="Mex">Audi</option>
<option value="Esp">BMW</option>
</select>
</td>
<td>
 
</td>
<td>
Modelo
</td>
<td>
<select name="ciudad">
<option value="0">Modelo a elegir</option>
</select>
</td>
<td>
 
</td>
<td>
Modelo
</td>
<td>
<select name="coche">
<option value="0">Coche a elegir</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

Eso es lo que he hecho, y ahora me queda que al seleccionar en el segundo select un modelo de coche, el tercer select se actualice y ponga los diferentes coches que hay según el modelo. Las pruebas que he hecho hasta ahora no me han funcionado. ¿Qué tendría que hacer?

Ember · #4 (**permalink**) 07/03/2005, 06:29

<html>
<body>
<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">  

<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>Elige una marca</option>
<option>Audi</option>
<option>BMW</option>
</select>

<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected>Elige un modelo</option>
</select>

<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected>Elige un coche</option>
</select>

<script>

var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Elige un modelo"," ");

group[1][0]=new Option("Elige un modelo"," ");
group[1][1]=new Option("A2"," ");
group[1][2]=new Option("A3","47");
group[1][3]=new Option("A4","46");
group[1][4]=new Option("A6","45");
group[1][5]=new Option("A8","44");
group[1][6]=new Option("TT","43");
group[1][7]=new Option("S4","42");
group[1][8]=new Option("S6","41");
group[1][9]=new Option("RS6","40");
group[1][10]=new Option("Cabrio","39");
group[1][11]=new Option("Allroad quattro","38");

group[2][0]=new Option("Elige un modelo"," ");
group[2][1]=new Option("Serie 1"," ");
group[2][2]=new Option("Serie 3","115");
group[2][3]=new Option("Serie 5","116");
group[2][4]=new Option("Serie 6","117");
group[2][5]=new Option("Serie 7","118");
group[2][6]=new Option("X3","119");
group[2][7]=new Option("X5","120");
group[2][8]=new Option("Z4","121");

var temp=document.isc.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}

var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++){
secondGroup[i][j]=new Array()
}
}

secondGroup[0][0][0]=new Option("Elige un coche"," ");
secondGroup[1][0][0]=new Option("Elige un coche"," ");
secondGroup[1][1][0]=new Option("Elige un coche"," ");
secondGroup[1][1][1]=new Option("Audi 1.2 TDI","");
secondGroup[1][1][2]=new Option("Audi 1.4","");
secondGroup[1][1][3]=new Option("Audi 1.4 TDI 75 CV","");
secondGroup[1][1][4]=new Option("Audi 1.6 FSI","");
secondGroup[1][1][5]=new Option("Audi 1.4 TDI 90 CV","");
secondGroup[1][1][6]=new Option("Audi 1.4 colour storm","");
secondGroup[1][1][7]=new Option("Audi 1.4 TDI 75 CV colour storm","");
secondGroup[1][1][8]=new Option("Audi 1.6 FSI colour storm","");
secondGroup[1][1][9]=new Option("Audi 1.4 TDI 90 CV colour storm","");

secondGroup[1][2][0]=new Option("Elige un coche"," ");
secondGroup[1][2][1]=new Option("A3 1.6 Attraction","");
secondGroup[1][2][2]=new Option("A3 1.6 Ambition","");
secondGroup[1][2][3]=new Option("A3 1.6 Ambiente","");

secondGroup[1][3][0]=new Option("Elige un coche"," ");
secondGroup[1][3][1]=new Option("A4","");
secondGroup[1][3][2]=new Option("A4","");

secondGroup[2][0][0]=new Option("Elige un coche"," ");
secondGroup[2][1][0]=new Option("Elige un coche"," ");
secondGroup[2][1][1]=new Option("Serie 1","");
secondGroup[2][1][2]=new Option("Serie 1","");
secondGroup[2][1][3]=new Option("Serie 1","");

secondGroup[2][2][0]=new Option("Elige un coche"," ");
secondGroup[2][2][1]=new Option("Serie 3","");
secondGroup[2][2][2]=new Option("Serie 3","");

var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}

/*function redirect2(z){
window.location=temp1[z].value
}*/

</script>
</td>
</tr>
</table><br>
<input type=submit value="Adelante">
</FORM>
</body>
</html>

El triple combo está resuelto, porque ya solo quedaría cambiar los valores de cada combo. Pero aún tengo una pequeña duda, porque necesito crear una función que controle lo siguiente:
Si el valor del primer combo y del segundo es el inicial (en mi caso, "Elegir una marca" y "Elegir un modelo"), cuando le doy al botón salta un alert que diga que hace falta seleccionar una marca y un modelo para continuar. Si no, hace lo que tenga que hacer. ¿Cómo puedo conseguir eso? Muchas gracias