Tema: Multiples selects dinámicos
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 14/03/2011, 12:36
Avatar de abimaelrc
abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años
Puntos: 1517
Respuesta: Multiples selects dinámicos
Bueno, dejo la forma como lo estoy trabajando (sinceramente no me siento orgulloso, pero para que otro se beneficie). Cuando crezca y sea grande y pueda hacer las cosas que hacen muchos de este foro, lo posteo como aporte, pero mientras tanto lo dejo en este tema

Cuando el valor y el texto es igual lo pueden hacer así
Código HTML: 
Ver original
  1. <script type="text/javascript">
  2. var arrOpt = new Array();
  3. arrOpt[1] = new Array();
  4. arrOpt[1][20] = new Array();
  5. arrOpt[1][20][21] = new Array();
  6. arrOpt[1][20][22] = new Array();
  7. arrOpt[1][20][23] = new Array();
  8. arrOpt[1][30] = new Array();
  9. arrOpt[1][30][31] = new Array();
  10. arrOpt[1][30][32] = new Array();
  11. arrOpt[1][30][33] = new Array();
  12. arrOpt[1][40] = new Array();
  13. arrOpt[1][40][41] = new Array();
  14. arrOpt[1][40][42] = new Array();
  15. arrOpt[1][40][43] = new Array();
  16.  
  17. arrOpt[100] = new Array();
  18. arrOpt[100][110] = new Array();
  19. arrOpt[100][110][111] = new Array();
  20. arrOpt[100][110][112] = new Array();
  21. arrOpt[100][110][113] = new Array();
  22. arrOpt[100][120] = new Array();
  23. arrOpt[100][120][121] = new Array();
  24. arrOpt[100][120][122] = new Array();
  25. arrOpt[100][120][123] = new Array();
  26. arrOpt[100][130] = new Array();
  27. arrOpt[100][130][131] = new Array();
  28. arrOpt[100][130][132] = new Array();
  29. arrOpt[100][130][133] = new Array();
  30.  
  31. arrOpt[1000] = new Array();
  32. arrOpt[1000][1100] = new Array();
  33. arrOpt[1000][1100][1110] = new Array();
  34. arrOpt[1000][1100][1120] = new Array();
  35. arrOpt[1000][1100][1130] = new Array();
  36. arrOpt[1000][1200] = new Array();
  37. arrOpt[1000][1200][1210] = new Array();
  38. arrOpt[1000][1200][1220] = new Array();
  39. arrOpt[1000][1200][1230] = new Array();
  40. arrOpt[1000][1300] = new Array();
  41. arrOpt[1000][1300][1310] = new Array();
  42. arrOpt[1000][1300][1320] = new Array();
  43. arrOpt[1000][1300][1330] = new Array();
  44.  
  45. var fIndexSession = 0;
  46. var sIndexSession = 0;
  47. var tIndexSession = 0;
  48.  
  49. function nullOptions(obj){
  50.     var n=obj.options.length
  51.     for (i=0;i<n;i++){
  52.         obj.options[i]=null
  53.     }
  54.     obj.options.length=0;
  55. }
  56.  
  57. function getOpt(objs){
  58.     var f = objs[0];
  59.     var fIndex = f.selectedIndex;
  60.  
  61.     var s = objs[1];
  62.     var sIndex = fIndexSession == fIndex ? s.selectedIndex : 0;
  63.     nullOptions(s);
  64.     sText = fIndex > 0
  65.         ? "Bar"
  66.         : "Foo";
  67.     s.options[0] = new Option("[Selecciona " + sText + "]", "", true);
  68.  
  69.     var t = objs[2];
  70.     var tIndex = sIndexSession == sIndex ? t.selectedIndex : 0;
  71.     nullOptions(t);
  72.     tText = fIndex > 0
  73.         ? (sIndex > 0
  74.             ? "Candy"
  75.             : "Bar")
  76.         : "Foo";
  77.     t.options[0] = new Option("[Selecciona " + tText + "]", "", true);
  78.  
  79.     fIndexSession = fIndex;
  80.     sIndexSession = sIndex;
  81.     tIndexSession = tIndex;
  82.  
  83.     for(var i in arrOpt){
  84.         if(i == f.value){
  85.             var n = 1;
  86.             for(var ii in arrOpt[i]){
  87.                 bool = sIndex == n ? true : false;
  88.                 s.options[n++] = new Option(ii, ii, false, bool);
  89.                 if(ii == s.value){
  90.                     var nn = 1;
  91.                     for(var iii in arrOpt[i][ii]){
  92.                         bool = tIndex == nn ? true : false;
  93.                         t.options[nn++] = new Option(iii, iii, false, bool);
  94.                     }
  95.                 }
  96.             }
  97.         }
  98.     }
  99. }
  100. </script>
  101. <form action="#">
  102.     Foo:
  103.     <select name="first" onchange="getOpt({0:this.form.first, 1:this.form.second, 2:this.form.third})">
  104.         <option value="">[Selecciona uno]</option>
  105.         <option value="1">1</option>
  106.         <option value="100">100</option>
  107.         <option value="1000">1000</option>
  108.     </select><br />
  109.  
  110.     Bar:
  111.     <select name="second" onchange="getOpt({0:this.form.first, 1:this.form.second, 2:this.form.third})">
  112.         <option value="">[Selecciona Foo]</option>
  113.     </select><br />
  114.  
  115.     Candy:
  116.     <select name="third">
  117.         <option value="">[Selecciona Foo]</option>
  118.     </select>
  119. </form>


Cuando el valor es diferente al texto, lo pueden hacer así
Código HTML: 
Ver original
  1. <script type="text/javascript">
  2. var arrOpt = new Array();
  3. arrOpt[1] = new Array();
  4. arrOpt[1]["20_veinte"] = new Array();
  5. arrOpt[1]["20_veinte"]["21_veintiuno"] = new Array();
  6. arrOpt[1]["20_veinte"]["22_veintidos"] = new Array();
  7. arrOpt[1]["20_veinte"]["23_veintitres"] = new Array();
  8. arrOpt[1]["30_treinta"] = new Array();
  9. arrOpt[1]["30_treinta"]["31_treinta y uno"] = new Array();
  10. arrOpt[1]["30_treinta"]["32_treinta y dos"] = new Array();
  11. arrOpt[1]["30_treinta"]["33_treinta y tres"] = new Array();
  12. arrOpt[1]["40_cuarenta"] = new Array();
  13. arrOpt[1]["40_cuarenta"]["41_cuarenta y uno"] = new Array();
  14. arrOpt[1]["40_cuarenta"]["42_cuarenta y dos"] = new Array();
  15. arrOpt[1]["40_cuarenta"]["43_cuarenta y tres"] = new Array();
  16.  
  17. arrOpt[100] = new Array();
  18. arrOpt[100]["110_ciento diez"] = new Array();
  19. arrOpt[100]["110_ciento diez"]["111_ciento once"] = new Array();
  20. arrOpt[100]["110_ciento diez"]["111_ciento doce"] = new Array();
  21. arrOpt[100]["110_ciento diez"]["111_ciento trece"] = new Array();
  22. arrOpt[100]["120_ciento veinte"] = new Array();
  23. arrOpt[100]["120_ciento veinte"]["121_ciento veintiuno"] = new Array();
  24. arrOpt[100]["120_ciento veinte"]["122_ciento veintidos"] = new Array();
  25. arrOpt[100]["120_ciento veinte"]["123_ciento veintitres"] = new Array();
  26. arrOpt[100]["130_ciento treinta"] = new Array();
  27. arrOpt[100]["130_ciento treinta"]["131_ciento treinta y uno"] = new Array();
  28. arrOpt[100]["130_ciento treinta"]["131_ciento treinta y dos"] = new Array();
  29. arrOpt[100]["130_ciento treinta"]["131_ciento treinta y tres"] = new Array();
  30.  
  31. arrOpt[1000] = new Array();
  32. arrOpt[1000]["1100_mil cien"] = new Array();
  33. arrOpt[1000]["1100_mil cien"]["1110_mil ciento diez"] = new Array();
  34. arrOpt[1000]["1100_mil cien"]["1120_mil ciento veinte"] = new Array();
  35. arrOpt[1000]["1100_mil cien"]["1130_mil ciento treinta"] = new Array();
  36. arrOpt[1000]["1200_mil docientos"] = new Array();
  37. arrOpt[1000]["1200_mil docientos"]["1210_mil docientos diez"] = new Array();
  38. arrOpt[1000]["1200_mil docientos"]["1220_mil docientos veinte"] = new Array();
  39. arrOpt[1000]["1200_mil docientos"]["1230_mil docientos treinta"] = new Array();
  40. arrOpt[1000]["1300_mil trecientos"] = new Array();
  41. arrOpt[1000]["1300_mil trecientos"]["1310_mil trecientos diez"] = new Array();
  42. arrOpt[1000]["1300_mil trecientos"]["1320_mil trecientos veinte"] = new Array();
  43. arrOpt[1000]["1300_mil trecientos"]["1330_mil trecientos treinta"] = new Array();
  44.  
  45. var fIndexSession = 0;
  46. var sIndexSession = 0;
  47. var tIndexSession = 0;
  48.  
  49. function nullOptions(obj){
  50.     var n=obj.options.length
  51.     for (i=0;i<n;i++){
  52.         obj.options[i]=null
  53.     }
  54.     obj.options.length=0;
  55. }
  56.  
  57. function getOpt(objs){
  58.     var f = objs[0];
  59.     var fIndex = f.selectedIndex;
  60.  
  61.     var s = objs[1];
  62.     var sIndex = fIndexSession == fIndex ? s.selectedIndex : 0;
  63.     nullOptions(s);
  64.     sText = fIndex > 0
  65.         ? "Bar"
  66.         : "Foo";
  67.     s.options[0] = new Option("[Selecciona " + sText + "]", "", true);
  68.  
  69.     var t = objs[2];
  70.     var tIndex = sIndexSession == sIndex ? t.selectedIndex : 0;
  71.     nullOptions(t);
  72.     tText = fIndex > 0
  73.         ? (sIndex > 0
  74.             ? "Candy"
  75.             : "Bar")
  76.         : "Foo";
  77.     t.options[0] = new Option("[Selecciona " + tText + "]", "", true);
  78.  
  79.     fIndexSession = fIndex;
  80.     sIndexSession = sIndex;
  81.     tIndexSession = tIndex;
  82.  
  83.     for(var i in arrOpt){
  84.         if(i == f.value){
  85.             var n = 1;
  86.             for(var ii in arrOpt[i]){
  87.                 sKey = ii.split("_");
  88.                 bool = sIndex == n ? true : false;
  89.                 s.options[n++] = new Option(sKey[1], sKey[0], false, bool);
  90.                 if(sKey[0] == s.value){
  91.                     var nn = 1;
  92.                     for(var iii in arrOpt[i][ii]){
  93.                         tKey = iii.split("_");
  94.                         bool = tIndex == nn ? true : false;
  95.                         t.options[nn++] = new Option(tKey[1], tKey[0], false, bool);
  96.                     }
  97.                 }
  98.             }
  99.         }
  100.     }
  101. }
  102. </script>
  103. <form action="#">
  104.     Foo:
  105.     <select name="first" onchange="getOpt({0:this.form.first, 1:this.form.second, 2:this.form.third})">
  106.         <option value="">[Selecciona uno]</option>
  107.         <option value="1">uno</option>
  108.         <option value="100">cien</option>
  109.         <option value="1000">mil</option>
  110.     </select><br />
  111.  
  112.     Bar:
  113.     <select name="second" onchange="getOpt({0:this.form.first, 1:this.form.second, 2:this.form.third})">
  114.         <option value="">[Selecciona Foo]</option>
  115.     </select><br />
  116.  
  117.     Candy:
  118.     <select name="third">
  119.         <option value="">[Selecciona Foo]</option>
  120.     </select>
  121. </form>

De estas dos formas eliminé más de 150 lineas de código.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
Última edición por abimaelrc; 15/03/2011 a las 06:30 Razón: quitar un parametro innecesario en las funciones