Crear Select dependiente de otro

pedromir · #1 (**permalink**) 31/07/2014, 07:11

Hola, tengo un Select cuyas opciones creo desde un array y utilizo una función para eliminar duplicados, pero ahora necesito crear otro Select y que al pinchar en una opcion del primer Select en el segundo me muestre las opciones correspondientes a la opción seleccionada en el primero pero manteniendo la función para eliminar duplicados porque en el segundo select también me puedo encontrar con elementos repetidos.

Este es el código que tengo, pero no se como enlazar el select2 con el Select1

Código Javascript:

Ver originalvar datos = new Array();
datos = [['Luis','deporte'],
['Antonio','manualidades'],
['Eva','deporte'],
['David','manualidades'],
['Maria','deporte']];
 
 function eliminaDuplicados(arr) {
 var i,
     len=arr.length,
     out=[],
     obj={};
 
 for (i=0;i<len;i++) {
    obj[arr[i][1]]=0;
 }
 for (i in obj) {
    out.push(i);
 }
 return out.sort();
}
 
function cambiar(){ 
var opciones = eliminaDuplicados(datos),
    total = opciones.length,
    lista = document.getElementById("select1"); 
for (var i = 0; i < total; i++){
    var opcion = document.createElement("option");
    opcion.value = opciones[i];
    opcion.innerHTML = opciones[i];
    lista.appendChild(opcion);
    opciones[i] = "Valor";
}
var variable = new Option("Elija una opcion","","defaultSelected","selected");
select1.options[0] = variable;
}

Me he creado este array para el segundo select y mi idea es que el elemento deporte del primer select se correspondería con el subCat[1]
El elemento manualidades del primer select se correspondería con el subCat[2] y así sucesivamente, pero al ponerle el índice al array ya no funciona, así que no se como conectar los datos de un select con los del otro.

Código Javascript:

Ver originalvar subCat = new Array();
subCat[1] = [['futbol'],['balonmano'],['futbol']];
subCat[2] = [['pintura'],['ceramica'],['pintura']]; 
 
 function eliminaDuplicados2(arr) {
 var i,
     len=arr.length,
     out=[],
     obj={};
 
 for (i=0;i<len;i++) {
    obj[arr[i]]=0;
 }
 for (i in obj) {
    out.push(i);
 }
 return out.sort();
}
 
    function cambiarSubCat(){ 
var opciones = eliminaDuplicados2(subCat),
    total = opciones.length,
    lista = document.getElementById("select2"); 
for (var i = 0; i < total; i++){
    var opcion = document.createElement("option");
    opcion.value = opciones[i];
    opcion.innerHTML = opciones[i];
    lista.appendChild(opcion);
    opciones[i] = "Valor";
}
var variable = new Option("Elija una actividad","","defaultSelected","selected");
select2.options[0] = variable;
}

Código HTML:

Ver original<body onload="cambiar()">
<select id="select1">
  <option></option>
  </select>     
 <select id='select2'>
            <option></option>
        </select>