[APORTE] Select Dinamico con Option's Estaticos

Ang3r · #1 (**permalink**) 04/01/2010, 01:49

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//          j88D  d8b   db  d888b  d8888b. d8888b. 
//         j8~88  888o  88 88' Y8b VP  `8D 88  `8D 
//        j8' 88  88V8o 88 88        oooY' 88oobY' 
//        V88888D 88 V8o88 88  ooo   ~~~b. 88`8b   
//            88  88  V888 88. ~8~ db   8D 88 `88. 
//            VP  VP   V8P  Y888P  Y8888P' 88   YD 
 
 
//                    ... by an open source ...
 
 
 
function evento(){
 
/*
  Codigo hecho por 4ng3r Para RIC (http://foro.project-ric.org/index.php) y mi Blog (http://angercode.wordpress.com)
  Select Dinamico con valores Estaticos...nada del otro mundo
  
  EL objeto SELECT Posee las siguientes propiedades:
  
    + length:         Numero de elementos dentro del select
    + name:           Nombre del Select
    + options:        Elemento Option guardado en forma de Array ejm= municipio.options[1].value
    + selectedIndex:  Retorna el ID de la opcion seleccionada
    + type:           Tipo de Seleccion
    
  EL objeto OPTION Posee las siguientes propiedades:
  
    + defaultSelected:  Es un booleano que determina que opcion va ser seleccionada por default
    + index:            Retorna el indice del Elemento, el id en pocas palabras
    + selected:         Retorna un booleano indicando si el elemento fue o no seleccionado
    + text:             Retorna el Texto que decribe el elemento
    + value:            Valor que contiene el elemento            
*/
  var select = document.getElementById("0");
  var municipio = document.getElementById(select.selectedIndex);
  var ciudad = document.getElementById("5");
  switch (parseInt(municipio.id)){
    case 0:
      ciudad.options.length=0; 
      alert("ELIJA UN OPCION CORRECTA");
    break;
    
    case 1:
        ciudad.disabled=false;
        ciudad.options.length=0;  // BORRAMOS TODOS LOS OPTION'S !!!!!!
        variable = new Option("Bogota","Bogota");
        ciudad.options[0]=variable;
        variable = new Option("Zipaquira","Zipaquira");
        ciudad.options[1]=variable;
        variable = new Option("Chia","Chia");
        ciudad.options[2]=variable;
        variable = new Option("La Vega","vega");
        ciudad.options[3]=variable;      
    break;
    
    case 2:
        ciudad.disabled=false;
        ciudad.options.length=0;
        variable = new Option("Medellin","Medellin");
        ciudad.options[0]=variable;
        variable = new Option("Itagui","Itagui");
        ciudad.options[1]=variable;
        variable = new Option("Envigado","Envigado");
        ciudad.options[2]=variable; 
    break;
    
    case 3:
      ciudad.disabled=false;
      ciudad.options.length=0;
      variable = new Option("Tunja","Tunja");
      ciudad.options[0]=variable;
    break;
    
    case 4:
      ciudad.disabled=false;
      ciudad.options.length=0;
      variable = new Option("Neiva","Neiva");
      ciudad.options[0]=variable;
      variable = new Option("La Plata","La Plata");
      ciudad.options[1]=variable;
      variable = new Option("Pitalito","Pitalito");
      ciudad.options[2]=variable;
      variable = new Option("San Agustin","San Agustin");
      ciudad.options[3]=variable;
      variable = new Option("Rivera","Rivera");
      ciudad.options[4]=variable;      
    break; 
       
    default:
    break;
  }
}

Nombre := Select Dinamico.html

Código html:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="Autor" content="4ng3r C0d3">
  <meta name="WebSite" content="angercode.wordpress.com">
  <title>SELECT DINAMICO</title>
  <script src="codejs.js" language="JavaScript1.5"></script>  
  </head>
  
  <body>
  <select name="Municipio" id="0" onChange="evento();">
    <option value="Seleccionar" selected="selected" id="6">Seleccionar</option>
    <option name="Cundinamarca" id="1">Cundinamarca</option>
    <option name="Antioquia" id="2">Antioquia</option>
    <option name="Boyaca" id="3">Boyaca</option>
    <option name="Huila" id="4">Huila</option>
  </select>
 
  <select name="Ciudad" id="5" disabled="disabled">
    <option selected="selected" id=0>Ciudades...</option>
  </select>
</body>
</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]

caricatos · #2 (**permalink**) 04/01/2010, 02:17

Hola:

¡Mal, mal!

¿Cómo se te ha pasado lo de poner id's numéricos...? revisa eso, haciéndolo empezar por una letra...

Saludos