Duda tonta Javascript

[Waska]

Hola a todos!

Soy nuevo en este foro, aunque he de decir que ya llevo tiempo leyendo posts que me han sido útiles (otros lenguajes).
El caso es que acabo de iniciarme con Javascript, y no lo entiendo mucho la verdad, tengo una duda sobre esto que os planteo, no creo que sea difícil:

Tengo esta función:

function Combos(x)
{
ItDepend=document.getElementById('CombDependiente' );
if(!ItDepend){return;}
var mitems=new Array();
var mitems_ids=new Array();
mitems['Elige']=[''];
mitems['Tardor']=['Elegir opción','Dia 1 - 09:00','Dia 1 - 11:30','Dia 2 - 09:00','Dia 2 - 11:30'];
mitems['Primavera']=['Elegir opción','Dia 3 - 09:00','Dia 3 - 11:30','Dia 4 - 09:00','Dia 4 - 11:30'];
mitems['Comidas']=['Elegir opción','Pan','leche','matequilla',];
mitems['Tecnologia']=['Select Item','Telefonos','Camaras','I-POD'];

mitems_ids['Tardor']=['0','1','2','3','4'];
mitems_ids['Primavera']=['0','5','6','7','8'];
mitems_ids['Comidas']=['0','9','10','11',];
mitems_ids['Tecnologia']=['0','12','13','14'];


ItDepend.options.length=0;
ItActual=mitems[x.options[x.selectedIndex].value];

ItActual_ids=mitems_ids[x.options[x.selectedIndex].value];

if(!ItActual){return;}
ItDepend.options.length=ItActual.length;
for(var i=0;i<ItActual.length;i++)
{
ItDepend.options[i].text=ItActual[i];
ItDepend.options[i].value=ItActual_ids[i];
}

}

Y tengo el siguiente formulario:

<form action="">
<label for="or">Categorias:</label>
<select name="or" id="or" onchange="Combos(this)">

<option value="Elige">Elige</option>
<option value="Tardor">Xerrada Tardor</option>
<option value="Primavera">Xerrada Primavera</option>
<option value="Comidas">Comidas</option>
<option value="Tecnologia">Tecnologia</option>
</select><br><br>

<label for="CombDependiente">Sub - Categorias:</label>
<select name="CombDependiente" id="CombDependiente" ></select><br><br>
<select name="CombDependiente" id="CombDependiente"></select><br><br>
</form>

El caso es que la función es buena.
Si os fijáis, tengo dos selects con name="CombDependiente".
En el primero, salen las subcategorías asociadas.
Lo que no entiendo, es por qué en el segundo no vuelven a salir (no se repite...)

¿Alguien me puede ayudar en esto?
Gracias de antemano a todos :)

[lobo_php]

no se si se podran dos iguales...

[Waska]

¿Poniendo un id distinto podría lograr obtener los valores asociados como en el primer select?
Lo he probado pero nada :(

Es decir:


<form action="">
<label for="or">Categorias:</label>
<select name="or" id="or" onchange="Combos(this)">

<option value="Elige">Elige</option>
<option value="Tardor">Xerrada Tardor</option>
<option value="Primavera">Xerrada Primavera</option>
<option value="Comidas">Comidas</option>
<option value="Tecnologia">Tecnologia</option>
</select><br><br>

<label for="CombDependiente">Sub - Categorias:</label>
<select name="CombDependiente" id="CombDependiente" ></select><br><br>
<select name="CombDependiente" id="CombDependiente"></select><br><br>


</form>

¿Debería cambiar el id? ¿Cómo haría para que volvieran a salir los valores?

Esque con PHP tendré que coger los valores... Y si los id's son iguales, estaré escribiendo encima...

Gracias por vuestra paciencia!!

[lobo_php]

una pregunta para que en ambos? si es realmente importante me pongo a buscar el lio

[hector2c]

Waska, tengo toooooooda la intención de ayudarte, pero tal vez el tonto sea yo, no entiendo muy bien tu enunciado, podrias explicarlo mas claro?? por favor...

[Waska]

Hola a todos de nuevo!
Muchas gracias por contestar!

Os comento la idea:

Lo que pretendo hacer con el formulario, es que cuando selecciono una categoría, se active el evento onchange para que me muestre las subcategorías.

Analizando el código:

<form action="">
<label for="or">Categorias:</label>
<select name="or" id="or" onchange="Combos(this)">

<option value="Elige">Elige</option>
<option value="Tardor">Xerrada Tardor</option>
<option value="Primavera">Xerrada Primavera</option>
<option value="Comidas">Comidas</option>
<option value="Tecnologia">Tecnologia</option>
</select><br><br>

<label for="CombDependiente">Sub - Categorias:</label>
<select name="CombDependiente" id="CombDependiente" ></select><br><br>
<select name="CombDependiente" id="CombDependiente"></select><br><br>
</form>

El select que he remarcado de color azul, se carga con los valores asociados a esa categoría, pero el select marcado de color naranja, no.

No entiendo el porqué, el caso es que esto es un código de prueba para poder implementar lo que realmente quiero:

El cliente escoge un día, y de ese día, tiene que escoger de los 3 turnos, el que mejor le va (por orden). Es decir, el select de color azul sería el turno que mejor le conviene (llamémosle turno A) y el de color naranja el que menos le conviene.
Por último, tiene que haber un tercer select que sería el turno que no le conviene.


Os agradezco mucho vuestra ayuda, un saludo ;)

[crujikoki]

Hola,

Yo creo que si que ntiendo lo que quieres hacer, pero no entiendo por que quieres tener dos selects que tengan las mismas opciones...

Por lo que he entendido, quieres que tu elección en un select superior limite las opciones del siguiente select i así hasta 3 veces. Pues yo para hacer eso te recomiendo AJAX. La cosa es que no se me ocurre otra forma de rellenar un select basándote en la elección de un select anterior sin refrescar la página...

Bueno, quizás podrías cargar todos los datos con el PHP, guardarlos en algún array con javaScript i con un OnChange del primer select mostrar en el siguiente las posiciones del array que tu quieras como opciones del segundo select.

Otra opción podría ser con el PHP pero a parte de que es un poco más engorroso no queda tan elegante!

Si tu duda es exclusivamente saber por que dos selects con el mismo ID no se te muestran las opciones del segundo select, no se que decirte. Quizás lo que está pasando es que rellena dos veces el primero y pasa del segundo.

Yo probaría cambiando esto:

Código PHP:

  ItDepend1=document.getElementById('CombDependiente1' ); 
ItDepend2=document.getElementById('CombDependiente2' ); 
 
... 
 
ItDepend1.options.length=0; 
ItDepend2.options.length=0; 
 
... 
 
if(!ItActual){return;} 
 
ItDepend1.options.length=ItActual.length; 
ItDepend2.options.length=ItActual.length; 
 
... 
 
for(var i=0;i<ItActual.length;i++) 
{ 
ItDepend1.options[i].text=ItActual[i]; 
ItDepend1.options[i].value=ItActual_ids[i]; 
 
ItDepend2.options[i].text=ItActual[i]; 
ItDepend2.options[i].value=ItActual_ids[i]; 
}  
   

Fíjate que he cambiado el nombre de los ID, por lo que en el HTML también tendrás que cambiarlos. No he probado el código ni nada y tampoco se si es la mejor opción, pero así a simple vista diría que tiene que funcionarte.

Cualquier cosa ya sabes!

[Waska]

Me ha encantado tu idea crujikoki!! (la de crear otro elemento para cada id...).

Ha funcionado! muchísimas gracias, en serio!

Y gracias a todos los que habéis contestado!

Espero ayudar en otros foros en aquellos lenguajes donde tenga más dominio, porque de Javascript precisamente flojeo mucho! jajaja

Saludos y gracias