Comunidad de diseño web y desarrollo en internet online

COMO HACER 3 COMBOBOX DEPENDIENTES

Citar            
MensajeEscrito el 13 Nov 2012 12:47 am
Hola,

tengo problemas con la creacion de tres combobox dependientes este es el codigo q tengo agradeceria cualquier ayuda ya que no he podido hacer q funcionen los tres

PrincipalCb.dataProvider = [{label:"Elije opción:"}, {label: "animales", data: 1}, {label: "flores", data: 2}, {label: "colores", data: 3}];
SubCb.rowCount = 3;
animales = new Array("perro", "gato", "vaca", "leon");
flores = new Array("margarita", "girsol", "cartucho");
colores = new Array("rojo", "verde", "morado");

Sub1Cb.rowCount = 3;
perro= Array("a", "b");
gato= Array("c");
vaca = Array("v");


//Creo un listener
listenerPrincipal = new Object();
//que actua al evento change
listenerPrincipal.change = function (){
//Defino el item seleccionado
var ItemSeleccionado = PrincipalCb.selectedItem.label;
//Elimino todos los items del subcombo
SubCb.removeAll();
Sub1Cb.removeAll();

//Construyo los items del subcombo
var subArray = eval(ItemSeleccionado);
var SubCombo = new Array()
var Sub1Combo = Array()

for(var i = 0; i < subArray.length; i++) {
//Separo utilizando el delimitador ;
SubCombo = subArray[i].split(";");
SubCb.addItem(SubCombo[0],SubCombo[1]);
Sub1Cb.addItem(SubCombo[0],SubCombo[1]);

}
}

//Creo un segundo listener para el segundo combo
listenerSecundario = new Object();
//que actua al evento change
listenerSecundario.change = function (evt){
var ItemSeleccionado = SubCb.selectedItem.label;

}

//Creo un segundo listener para el tercer combo
listenerTerciario = new Object();
//que actua al evento change
listenerTerciario.change = function (evt){
}

PrincipalCb.addEventListener("change", listenerPrincipal);
SubCb.addEventListener("change", listenerSecundario);
Sub1Cb.addEventListener("change", listenerTerciario);



Gracias...........

Por anaperez

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Nov 2012 12:55 am
Hola anaperez,

He revisado tu código y he podido observar que cuando seleccionas algo en el primer combobox aparece data en el segundo y en el tercer combobox (en lugar de sólo el segundo).

Esto se debe a lo siguiente:
en tu función listenerPrincipal.change has colocado que se llenen ambos combobox, es decir, has colocado:
SubCb.addItem(SubCombo[0],SubCombo[1]) ---> 2do combobox
Sub1Cb.addItem(SubCombo[0],SubCombo[1]) ---> 3er combobox

Ahí debes colocar sólo para que se llene el segundo combobox.

Para que se llene el tercer combobox debes colocarlo en la función: listenerSecundario.change.

A continuación coloco tu código corregido:

Código ActionScript :

PrincipalCb.dataProvider = [{label:"Elije opción:"}, {label: "animales", data: 1}, {label: "flores", data: 2}, {label: "colores", data: 3}];

SubCb.rowCount = 3;
animales = new Array("perro", "gato", "vaca", "leon");
flores = new Array("margarita", "girsol", "cartucho");
colores = new Array("rojo", "verde", "morado");

Sub1Cb.rowCount = 3;
perro= Array("a", "b");
gato= Array("c");
vaca = Array("v");

listenerPrincipal = new Object();

listenerPrincipal.change = function ()
{
   var ItemSeleccionado = PrincipalCb.selectedItem.label;
   SubCb.removeAll();
   Sub1Cb.removeAll();
   var subArray = eval(ItemSeleccionado);
   var SubCombo = new Array();
   var Sub1Combo = new Array();
   for(var i = 0; i < subArray.length; i++) 
   {
      SubCombo = subArray[i].split(";");
      SubCb.addItem(SubCombo[0],SubCombo[1]);
   }
}

listenerSecundario = new Object();

listenerSecundario.change = function (evt)
{
   var ItemSeleccionado = SubCb.selectedItem.label;
   Sub1Cb.removeAll();
   var subArray = eval(ItemSeleccionado);
   var SubCombo = new Array();
   var Sub1Combo = new Array();
   for(var i = 0; i < subArray.length; i++) 
   {
      SubCombo = subArray[i].split(";");
      Sub1Cb.addItem(SubCombo[0],SubCombo[1]);
   }
   
}

listenerTerciario = new Object();
listenerTerciario.change = function (evt)
{
   // colocar aqui código para que haga algo cuando selecciona el tercer combo box
}

PrincipalCb.addEventListener("change", listenerPrincipal);
SubCb.addEventListener("change", listenerSecundario);
Sub1Cb.addEventListener("change", listenerTerciario);


Por favor pruebalo y comentanos como te fue!

Saludos

Nota: Observar que si eliges animales y luego quiere elegir perro, no te saldrá nada en el tecer combobox hasta que primero elijas otro animal y luego retornes a perro.

Por chochito_alegre

51 de clabLevel



Genero:Masculino  

Lima - Perú

firefox

 

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