Comunidad de diseño web y desarrollo en internet online

Problema con 4 List-Menu

Citar            
MensajeEscrito el 12 Dic 2011 09:29 pm
hola a todos como estan espero ke muy bien y gracias de todos modos por leer mi mensaje mi problema es el siguiente estoy haciendo 4 LIst-menu dependientes.

Ejemplo.
al seleccionar el primer combo , se marca el segundo, alseleccionar el segundo se marca el tercero al seleccionar el tercero se marca el cuarto. hasta ahi voy bien

al seleccionar el primer texto del combo uno se relaciona con algun texto del segundo, al selecionar el texto del segundo tiene que ir relacionado con al texto tercero, al selecionar al|gun texto tendria que relacionarse con algun texto del 4 list-menu, pero no sale......

list.menu1 -México
list.menu 2-México- ciudad de méxico
list.menu 3-México- ciudad de méxico-a)coyoacán b) Hidaldo c) Tlalpan
list.menu 4-México ciudad de méxico 1.-(ejemplo seleccion de Coyoacán)
-a)oxtopulco b) Santo domingo c) universidad

Pero al tratar de slecionar Coyocán me sale mal....

ejemplo : http://eskovio.com/Untitled-2-1.html

El codigo esta adentro de la pagina de ejemplo

Gracias por leer mi mensaje

Por naverus

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Dic 2011 02:04 am
Gracias a todos por ver el post, ya encontre la solucion .......

Aquí les dejo el codigo:) de 4 combo-box, podrian sakar todos los combobox, que quieran 5,6,7,8 etc....Dependientes..

cuidadop no olvidar el ..............es importante :)

function getValue(L4, L3, L2, L1) {
;
}
-------------------------------------------------------------------------------------

<script type="text/javascript">
var categories = [];
categories["startList"] = ["Ropa","Libros"]
categories["Ropa"] = ["Hombre","Mujer","Niños"];
categories["Hombre"] = ["Cinturon","Corbata","Saco"];
categories["Mujer"] = ["Vestido","Tacones","Joya"];
categories["Niños"] = ["Playera","Carritos","Pelota"];
categories["Libros"] = ["Ficcion","Terror","Comedia"];
categories["Ficcion"] = ["Viaje a las estrellas","Guerra de las Galaxias","Fin del Mal"];
categories["Terror"] = ["Freddy1","La casa Maldita","Colibris del Mal"];
categories["Comedia"] = ["Visitando","La casa casi completa","Dos perros en Apuros"];
categories["Visitando"] = ["Visitando al Elefante verde","La casa verde","plok"];
categories["La casa casi completa"] = ["Visitando al Elefante rojo","La casa azul","verde"];
categories["Dos perros en Apuros"] = ["Perro Grande","Perro Mediano","Perro chico"];
var nLists = 4; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L4, L3, L2, L1) {
;
}

function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>



El formulario........ Aqui cuidadop al insertar mas combo-box checar el orden y cuidado con el ultimo Combo-box es ke llama a todos los select...............

Empieza

<form name="tripleplay" action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Selecciona un Campo</option>
</select>
&nbsp;
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Selecciona un Campo</option>
</select>
&nbsp;
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])">

<option selected >Selecciona un Campo</option>
</select>

<select name='List4' onchange="getValue(this.value, this.form['List3'].value,this.form['List2'].value, this.form['List1'].value)">

<option selected >Selecciona un Campo</option>
</select>

</form>

Termina.......

Por naverus

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Dic 2011 02:10 am
Pues mira que yo cree hace tiempo una clase para manejar específicamente eso (los combos interactivos), normalmente usaba ajax para manejarlos, pero para aligerar la carga del servidor escribí este código, en este ejemplo que es de 4 niveles veras que solo Argentina y Korea tiene datos de las aldeas (que es el cuarto nivel) pero creo que con esto es suficiente para que te puedas guiar.

guardalos en la misma carperta para que los puedas probar:


(index.html)

Código HTML :

<!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.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"},
                        "1.1.2.2": {des: "Aldea 2 de la segunda cuidad de Argentina"},
                        "1.1.2.3": {des: "Aldea 3 de la segunda cuidad de Argentina"},
                     }
                  },
                  "1.1.3": {des: "Ciudad de Argentina 3",
                     values:{
                        "1.1.3.1": {des: "Aldea 1 de la tercera cuidad de Argentina"},
                        "1.1.3.2": {des: "Aldea 2 de la tercera cuidad de Argentina"},
                        "1.1.3.3": {des: "Aldea 3 de la tercera cuidad de Argentina"},
                     }
                  }
               }
            },
            "1.2": {des: "Honduras",
               values: {
                  "1.2.1": {des: "Ciudad de Honduras 1"},
                  "1.2.2": {des: "Ciudad de Honduras 2"},
                  "1.2.3": {des: "Ciudad de Honduras 3"}
               },
            },
            "1.3": {des: "México",
               values: {
                  "1.3.1": {des: "Cuidad de México 1"},
                  "1.3.2": {des: "Cuidad de México 2"},
                  "1.3.3": {des: "Cuidad de México 3"}
               }
            }
         }
      },
      "2": {des: "Asia",
         values: {
            "2.1": {des: "China",
               values: {
                  "2.1.1": {des: "Ciudad de China 1"},
                  "2.1.2": {des: "Ciudad de China 2"},
                  "2.1.3": {des: "Ciudad de China 3"}
               }
            },
            "2.2": {des: "Japón",
               values: {
                  "2.2.1": {des: "Ciudad de Japón 1"},
                  "2.2.2": {des: "Ciudad de Japón 2"},
                  "2.2.3": {des: "Ciudad de Japón 3"}
               },
            },
            "2.3": {des: "Korea",
               values: {
                  "2.3.1": {des: "Cuidad de Korea 1",
                     values:{
                        "3.2.1.1": {des: "Aldea 1 de la primera cuidad de Korea"},
                        "3.2.1.2": {des: "Aldea 2 de la primera cuidad de Korea"},
                        "3.2.1.3": {des: "Aldea 3 de la primera cuidad de Korea"},
                     }
                  },
                  "2.3.2": {des: "Cuidad de Korea 2",
                     values:{
                        "3.2.1.1": {des: "Aldea 1 de la primera cuidad de Korea"},
                        "3.2.1.2": {des: "Aldea 2 de la primera cuidad de Korea"},
                        "3.2.1.3": {des: "Aldea 3 de la primera cuidad de Korea"},
                     }
                  },
                  "2.3.3": {des: "Cuidad de Korea 3",
                     values:{
                        "3.2.1.1": {des: "Aldea 1 de la primera cuidad de Korea"},
                        "3.2.1.2": {des: "Aldea 2 de la primera cuidad de Korea"},
                        "3.2.1.3": {des: "Aldea 3 de la primera cuidad de Korea"},
                     }
                  }
               }
            }
         }
      },
      "3": {des: "Europa",
         values: {
            "3.1": {des: "Alemania",
               values: {
                  "3.1.1": {des: "Ciudad de Alemania 1"},
                  "3.1.2": {des: "Ciudad de Alemania 2"},
                  "3.1.3": {des: "Ciudad de Alemania 3"}
               }
            },
            "3.2": {des: "España",
               values: {
                  "3.2.1": {des: "Ciudad de España 1"},
                  "3.2.2": {des: "Ciudad de España 2"},
                  "3.2.3": {des: "Ciudad de España 3"}
               },
            },
            "3.3": {des: "Francia",
               values: {
                  "3.3.1": {des: "Cuidad de Francia 1"},
                  "3.3.2": {des: "Cuidad de Francia 2"},
                  "3.3.3": {des: "Cuidad de Francia 3"}
               }
            }
         }
      }
   };
   combos.init();
</script>

</body>
</html>


(hCombos.js)

Código Javascript :

function hCombos(){
   this.ids  = [];
   this.info = {};
   this.num  = {};
   this.objs = [];
   this.pre  = [];
   this.ocupado = false;
   
   this.init = function(){
      var clase = this;
      var id, obj;
      for(var n = 0; n < this.ids.length; n++){
         id = this.ids[n];
         this.num[id] = n;
         obj = document.getElementById(id);
         if (n != this.ids.length - 1){
            obj.onchange = function(){
               if(clase.ocupado == false){
                  clase.ocuapo == true;
                  clase.change(this, this.id);
                  clase.ocupado = false;
               }
            };
         }
         this.objs.push(obj);
      }
      this.refreshOpts(0, this.info);
      
      if (this.pre.length > 0){ 
         var combo, options;
         for(var n = 0; n < this.pre.length; n++){
            combo = this.objs[n];
            options = combo.getElementsByTagName("option");
            for(var m = 0; m < options.length; m++){
               if(options[m].value == this.pre[n]){
                  options[m].selected = "selected";
                  if (combo.onchange)   combo.onchange();
               }
            }
         }
      }
      
   };
   
   this.change = function(obj, id){
      var arbol = this.info;
      var numNivel = this.num[id];
      var arbolDes = '';
      var arbolId = '';
      var arbolHijo = {};
      var restantes = 0;

      for (var n = 0; n < this.ids.length; n++){
         arbolId = this.objs[n].value; 
         if(!arbolId){
            restantes = n + 1;
            break;
         }
         arbolDes = arbol[arbolId].des;
         
         if (n == numNivel){
            this.refreshOpts(n + 1, arbol[arbolId].values);
         }
         
         arbol = arbol[arbolId].values;
      }
      if(restantes < this.ids.length)
      for(var n = restantes; n < this.ids.length; n++){
         this.refreshOpts(n, {});
      }
   };
   
   this.refreshOpts = function(nCombo, valores){
      if (!this.objs[nCombo]) return;
      var combo = this.objs[nCombo];
      var preVal = combo.value;
      combo.innerHTML = '';
      
      var opt = this.newOpt('', '');
      combo.appendChild(opt);
      
      for(x in valores){
         opt = this.newOpt(x, valores[x].des);
         combo.appendChild(opt);
      }
   };
   
   this.newOpt = function(value, innerHTML){
      var opt = document.createElement('option');
      opt.value = value;
      opt.innerHTML = innerHTML;
      return opt;
   };
   
};

/* Developed by Herson Salinas, feel free to share */

Por hersonHN

Claber

272 de clabLevel

3 tutoriales

Genero:Masculino  

chrome
Citar            
MensajeEscrito el 13 Dic 2011 02:14 am
Muchas gracias de verdad esta muy bien hecho y jala de pokahontaxs:) busuqe mucho , y despues encontre la respuesta con el ejemplo anterior que puse pero en el primer post como lo haces tu quedo muy bien muchas gracias:) de todos modos:)

Por naverus

6 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.