Ver Mensaje Individual
  #2 (permalink)  
Antiguo 08/03/2011, 12:09
Avatar de goteen_mx
goteen_mx
 
Fecha de Ingreso: abril-2005
Ubicación: D.F.
Mensajes: 403
Antigüedad: 19 años
Puntos: 37
Respuesta: Multiples selects dinámicos

Yo creo que para no tener cada una de las funciones puedes hacer una generica que reciba que select va a llenar y todas tus opciones guardarlas en un arreglo a manera de matriz y recorres el arreglo cada que quieres llenar un select por ej.

Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <script>
  4. var aOpciones = new Array();
  5. //esto se llenaria con PHP
  6. // se me ocurre esta estructura [idOpcion, icPadre, opcionTexto] a fin de llenarlo a manera de un árbol con sus hijos
  7.  
  8. aOpciones[0]=[1,0,'primerSelect1'];
  9. aOpciones[1]=[2,0,'primerSelect2'];
  10. //las dependientes del hijo
  11. aOpciones[2]=[3,1,'hijo1 primer select opcion 0'];
  12. aOpciones[3]=[4,1,'hijo 2  primer select opcion 0'];
  13. //dependientes del segundo hijo
  14. aOpciones[4]=[4,2,'hijo1 primeer select opcion1'];
  15. aOpciones[5]=[5,2,'hijo2 primer select opcin1'];
  16. //...........
  17. //...........N hijos
  18.  
  19.  
  20.  //primer parametro la forma, segundo el select a llenar
  21. function f_llenaSlect(forma, slectPos){
  22.         //si es -1 es el ultimo select para llenar
  23.         if(slectPos==-1)
  24.             return;
  25.          else{//limpio select a llenar
  26.                 (document.getElementById("slect"+slectPos).options.length=0;
  27.                 for(var i=0;i<aOpciones.length:i++){//for para recorrer el arreglo
  28.                       if(aOpciones[i][1]==document.getElementById("slect"+slectPos-1).options.selectedIndex){  // obtengo la opcion seleccionada del padre y comparo el arreglo
  29.                               document.getElementById("slect"+slectPos).options.length++;
  30.                               document.getElementById("slect"+slectPos).options[document.getElementById("slect"+slectPos).options.length-1].value=aOpciones[i][0];
  31.                               document.getElementById("slect"+slectPos).options[document.getElementById("slect"+slectPos).options.length-1].text=aOpciones[i][2];
  32.                         }
  33.               }
  34.      }
  35. }
  36. </script>
  37. </head>
  38. <body onload="f_llenaSlect(document.forms[0],1)">
  39. <form action="#">
  40.  
  41.     Foo:
  42.  
  43.     <select name="slect1" onchange="firstFunction(this.form,2);">
  44.  
  45.         <option value="">[Selecciona uno]</option>
  46.  
  47.     </select><br />
  48.  
  49.  
  50.  
  51.     Bar:
  52.  
  53.     <select id="slct2" onchange="f_llenaSlect(this.form,3);">
  54.  
  55.         <option value="">[Selecciona Foo]</option>
  56.  
  57.     </select><br />
  58.  
  59.  
  60.  
  61.     Candy:
  62.  
  63.     <select id="slect3" onchange="f_llenaSlect(this.form,-1);">
  64.  
  65.         <option value="">[Selecciona Foo]</option>
  66.  
  67.     </select>
  68.  
  69. </form>
  70. </body>
  71. </html>

Y ya si necesitas que cada opcion o select tenga una función en especifico, la puedes agregar al arreglo y asignarla con js al select que necesites.

Saludos.