Cargar Combos dependiendo de la elección

Marzo 27, 2007

En ocasiones es necesario manejar varios campos de selección que se deberán cargar dependiendo de la sección en que se encuentran. Por ejemplo cargar una subcategoria dependiendo de la categoria a la que pertenece.

Para ver este ejemplo puedes ingresar a:
http://blog.undermedia.com.ec/examples/combos.html

Además también puede ser muy importante identificar la opción seleccionada y que puede estar dada por un código que puede provenir de una BDD.

Entonces para solucionar este problema podemos crear un javascript java como sigue:

1. <script language="javascript">
2. function Combos(x)
3. {
4. ItDepend=document.getElementById('CombDependiente');
5. if(!ItDepend){return;}
6. var mitems=new Array();
7. var mitems_ids=new Array();
8. mitems['Elige']=[''];
9. mitems['Informatica']=['Elegir opcion',
10. 'Monitor',
11. 'CPU',
12. 'Teclado',
13. 'Mouse'];
14. mitems['Deportes']=['Elegir opcion',
15. 'Futbol','Basket',
16. 'Volley',
17. 'Atletismo'];
18. mitems['Comidas']=['Elegir opcion',
19. 'Pan',
20. 'leche',
21. 'matequilla',];
22. mitems['Tecnologia']=['Elegir opcion',
23. 'Telefonos',
24. 'Camaras',
25. 'I-POD'];
26.  
27. mitems_ids['Informatica']=['0','1','2','3','4'];
28. mitems_ids['Deportes']=['0','5','6','7','8'];
29. mitems_ids['Comidas']=['0','9','10','11',];
30. mitems_ids['Tecnologia']=['0','12','13','14'];
31.  
32.  
33. ItDepend.options.length=0;
34. ItActual=
35. mitems[x.options[x.selectedIndex].value];
36.  
37. ItActual_ids=
38. mitems_ids[x.options[x.selectedIndex].value];
39.  
40. if(!ItActual){return;}
41. ItDepend.options.length=ItActual.length;
42. for(var i=0;i<ItActual.length;i++)
43. {
44. ItDepend.options[i].text=ItActual[i];
45. ItDepend.options[i].value=ItActual_ids[i];
46. }
47.  
48. }
49. function Valor(x)
50. {
51. depend=document.getElementById('CombDependiente');
52. document.getElementById('valor').value=
53. document.getElementById('CombDependiente').value;
54. }
55. </script>

Y en el formulario dentro del html ponemos:

1. <form action="">
2. <label for="or">Categorias:</label>
3. <select name="or" id="or" onchange="Combos(this)">
4. <option value="Elige">Elige</option>
5. <option value="Informatica">Informatica</option>
6. <option value="Deportes">Deportes</option>
7. <option value="Comidas">Comidas</option>
8. <option value="Tecnologia">Tecnologia</option>
9. </select><br><br>
10. <label for="CombDependiente">Sub - Categorias:</label>
11. <select name="CombDependiente" id="CombDependiente" onchange="Valor(this)"></select><br><br>
12. <label for="Id:">ID: </label><input type="text" name="valor" id="valor" />
13. </form>

De esta forma podemos cargar las opciones dependiendo de la categoría en la que se encuentra y obtener el id respectivo de la selección.

Para ver este ejemplo puedes ingresar a:
http://blog.undermedia.com.ec/examples/combos.html

Nota: Este ejemplo es una adaptacion del script publicado en: http://www.webintenta.com/combos-dependientes-i.html

Entrada almacenada bajo: Libre, Scripts

Este post ha sido visto 963 veces