Manejar combos multi-niveles con Javascript a partir de un objeto JSON

| diciembre 20, 2011 |
Tags: , , , , , , , , , , , , , , , , , , ,

Buenas!, quería aportar hoy algo que hice hace algunos meses y que me ha sido a mí de mucha utilidad y es un método de cómo usar combos interactivos a partir de un árbol de JSON. Esto les podrá servir para crear combos interactivos más rápido con pocas opciones y pocos niveles.

Creo que los que ya han hecho combos interactivos con ajax saben que puede llegar a ser un dolor de cabeza, así que yo preferí hacerlo todo creando una clase para manejarlo en un sólo llamado.

En fin, aquí les mando el source del HTML y Javascript para crear uno de prueba
(en esta prueba uso 4 niveles: continente, país, cuidad, aldea) pero sólo 2 dos opciones tienen 4 niveles, las demás tienen 3, esto lo hago a propósito para que puedan ver cómo se comporta si los datos están incompletos.

Bueno aquí esta el código, abajo de todo explico las partes esenciales para generar la clase…
(index.html)

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Combos interactivos</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<style type="text/css">

body{ font-family: sans-serif }

span{ display: block; width: 100px; float: left; clear: left;}

select{ float: left;  }

</style>

</head>

<body>


<p>   

   <span>Continente</span>

   <select id="select1">

   <option value=""></option>

   </select>

</p>

<p>

   <span>País</span>

   <select id="select2">

   <option value=""></option>

   </select>

</p>

<p>

   <span>Cuidad</span>

   <select id="select3">

   <option value=""></option>

   </select>

</p>

<p>

   <span>Aldea</span>

   <select id="select4">

   <option value=""></option>

   </select>

</p>


<script type="text/javascript" src="hCombos.js"></script>

<script type="text/javascript">

   var combos = new hCombos();

   combos.ids = ['select1', 'select2', 'select3', 'select4'];

   combos.pre = ['1', '1.1', '1.1.3', '1.1.3.2'];

   combos.info = {

      "1": {des: "America",

         values: {

            "1.1": {des: "Argentina",

               values: {

                  "1.1.1": {des: "Ciudad de Argentina 1",

                     values:{

                        "1.1.1.1": {des: "Aldea 1 de la primera cuidad de Argentina"},

                        "1.1.1.2": {des: "Aldea 2 de la primera cuidad de Argentina"},

                        "1.1.1.3": {des: "Aldea 3 de la primera cuidad de Argentina"},

                     }

                  },

                  "1.1.2": {des: "Ciudad de Argentina 2",

                     values:{

                        "1.1.2.1": {des: "Aldea 1 de la segunda cuidad de Argentina"},

        ...

Continua leyendo desde la fuente



Related posts:
  1. Contenido HTML editable con HTML5 y Javascript Una de las cosas nuevas que trae HTML5 es la...
    2. 

  2. Ajustar niveles de color en fotos con Photoshop Podemos aumentar el rango dinámico de nuestras imágenes poco contrastadas...
    3. 

  3. PLANOS DE VIVIENDA DE 3 NIVELES CON GARAJE PLANOS DE VIVIENDA DE 3 NIVELES CON GARAJE y sala...
    4. 



Related posts brought to you by Yet Another Related Posts Plugin.
 


			
						

Este articulo no pertenece a Shft.Info 
 indexamos los artículos que se encuentran en otros sitios y los organizamos en este directorio de articulos.

Leave a Reply