Tema: [APORTE] Select Dinamico con Option's Estaticos
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/01/2010, 01:49
Ang3r
 
Fecha de Ingreso: noviembre-2009
Mensajes: 42
Antigüedad: 15 años
Puntos: 0
Información [APORTE] Select Dinamico con Option's Estaticos
Esta idea surgió de un cod3 que me toco hacer para el trabajo, yo se que no es nada del otro mundo pero da pautas esenciales en cuanto al manejo de objetos y de eventos para diseñar un select totalmente dinámico es decir con algo de base de datos. Pero el fin de este post es mostrarles el cod3 al final de mi desarrollo hay se los dejo:

Nombre := codejs.js

Código javascript: 
Ver original
  1. //          j88D  d8b   db  d888b  d8888b. d8888b. 
  2. //         j8~88  888o  88 88' Y8b VP  `8D 88  `8D 
  3. //        j8' 88  88V8o 88 88        oooY' 88oobY' 
  4. //        V88888D 88 V8o88 88  ooo   ~~~b. 88`8b   
  5. //            88  88  V888 88. ~8~ db   8D 88 `88. 
  6. //            VP  VP   V8P  Y888P  Y8888P' 88   YD 
  7.  
  8.  
  9. //                    ... by an open source ...
  10.  
  11.  
  12.  
  13. function evento(){
  14.  
  15. /*
  16.   Codigo hecho por 4ng3r Para RIC (http://foro.project-ric.org/index.php) y mi Blog (http://angercode.wordpress.com)
  17.   Select Dinamico con valores Estaticos...nada del otro mundo
  18.   
  19.   EL objeto SELECT Posee las siguientes propiedades:
  20.   
  21.     + length:         Numero de elementos dentro del select
  22.     + name:           Nombre del Select
  23.     + options:        Elemento Option guardado en forma de Array ejm= municipio.options[1].value
  24.     + selectedIndex:  Retorna el ID de la opcion seleccionada
  25.     + type:           Tipo de Seleccion
  26.     
  27.   EL objeto OPTION Posee las siguientes propiedades:
  28.   
  29.     + defaultSelected:  Es un booleano que determina que opcion va ser seleccionada por default
  30.     + index:            Retorna el indice del Elemento, el id en pocas palabras
  31.     + selected:         Retorna un booleano indicando si el elemento fue o no seleccionado
  32.     + text:             Retorna el Texto que decribe el elemento
  33.     + value:            Valor que contiene el elemento            
  34. */
  35.   var select = document.getElementById("0");
  36.   var municipio = document.getElementById(select.selectedIndex);
  37.   var ciudad = document.getElementById("5");
  38.   switch (parseInt(municipio.id)){
  39.     case 0:
  40.       ciudad.options.length=0; 
  41.       alert("ELIJA UN OPCION CORRECTA");
  42.     break;
  43.     
  44.     case 1:
  45.         ciudad.disabled=false;
  46.         ciudad.options.length=0;  // BORRAMOS TODOS LOS OPTION'S !!!!!!
  47.         variable = new Option("Bogota","Bogota");
  48.         ciudad.options[0]=variable;
  49.         variable = new Option("Zipaquira","Zipaquira");
  50.         ciudad.options[1]=variable;
  51.         variable = new Option("Chia","Chia");
  52.         ciudad.options[2]=variable;
  53.         variable = new Option("La Vega","vega");
  54.         ciudad.options[3]=variable;      
  55.     break;
  56.     
  57.     case 2:
  58.         ciudad.disabled=false;
  59.         ciudad.options.length=0;
  60.         variable = new Option("Medellin","Medellin");
  61.         ciudad.options[0]=variable;
  62.         variable = new Option("Itagui","Itagui");
  63.         ciudad.options[1]=variable;
  64.         variable = new Option("Envigado","Envigado");
  65.         ciudad.options[2]=variable; 
  66.     break;
  67.     
  68.     case 3:
  69.       ciudad.disabled=false;
  70.       ciudad.options.length=0;
  71.       variable = new Option("Tunja","Tunja");
  72.       ciudad.options[0]=variable;
  73.     break;
  74.     
  75.     case 4:
  76.       ciudad.disabled=false;
  77.       ciudad.options.length=0;
  78.       variable = new Option("Neiva","Neiva");
  79.       ciudad.options[0]=variable;
  80.       variable = new Option("La Plata","La Plata");
  81.       ciudad.options[1]=variable;
  82.       variable = new Option("Pitalito","Pitalito");
  83.       ciudad.options[2]=variable;
  84.       variable = new Option("San Agustin","San Agustin");
  85.       ciudad.options[3]=variable;
  86.       variable = new Option("Rivera","Rivera");
  87.       ciudad.options[4]=variable;      
  88.     break; 
  89.        
  90.     default:
  91.     break;
  92.   }
  93. }

Nombre := Select Dinamico.html

Código html: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="Autor" content="4ng3r C0d3">
  6.   <meta name="WebSite" content="angercode.wordpress.com">
  7.   <title>SELECT DINAMICO</title>
  8.   <script src="codejs.js" language="JavaScript1.5"></script>  
  9.   </head>
  10.   
  11.   <body>
  12.   <select name="Municipio" id="0" onChange="evento();">
  13.     <option value="Seleccionar" selected="selected" id="6">Seleccionar</option>
  14.     <option name="Cundinamarca" id="1">Cundinamarca</option>
  15.     <option name="Antioquia" id="2">Antioquia</option>
  16.     <option name="Boyaca" id="3">Boyaca</option>
  17.     <option name="Huila" id="4">Huila</option>
  18.   </select>
  19.  
  20.   <select name="Ciudad" id="5" disabled="disabled">
  21.     <option selected="selected" id=0>Ciudades...</option>
  22.   </select>
  23. </body>
  24. </html>

[url=http://codes4ng3r.freehostia.com/Codes/Dinamico/Select%20Dinamico.html][size=4][color=brown]VISTA PREVIA[/color][/size][/url]
[url=http://angercode.wordpress.com/2010/01/04/select-dinamico-con-options-estaticos/]
[size=4][color=purple]Funte[/color][/size][/url]