Los Foros
http://foros.espaciolatino.com/

Enlazar un select dependiente con el principal
http://foros.espaciolatino.com/viewtopic.php?f=2&t=958
Página 1 de 1

Autor:  David60 [ 05 Ago 2014 13:11 ]
Asunto:  Enlazar un select dependiente con el principal

Hola, tengo un select que depende de otro y al pinchar en una opción del primero, en el segundo me aparecen las opciones correspondientes.
Si las opciones del primer select las genero como muestro abajo, escribiendo las opciones con su value correspondiente no hay ningún problema, el segundo select funciona perfectamente.
Código:
     <select id='select1' onchange='cargarSelect2(this.value);'>
            <option value='0'>Selecciona una opcion</option>
            <option value='1'>deporte</option>
            <option value='2'>cocina</option>
            <option value='3'>manualidades</option>
        </select>

Pero si las opciones del select1, las genero a través de un array, que es lo que yo necesito, el select2 ya no funciona, he probado distintas cosas, pero no consigo que este coja los value del primer select, en la función para generar las opciones va incluida la llamada a una función que me elimina los elementos duplicados, aunque esta función no la he puesto y lo necesito así, por eso utilizo esta función para generar los options
Código:
var actividades = new Array();
actividades = [['1','deporte'],
['2','cocina'],
['3','manualidades']];

function cambiar(){
var opciones = eliminaDuplicados(actividades),
    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;
}

Este es el código del select2
Código:
 * Funcion que se ejecuta al seleccionar una opcion del primer select
 */
function cargarSelect2(valor)
{
    /**
     * Este array contiene los valores sel segundo select
     * Los valores del mismo son:
     *  - hace referencia al value del primer select. Es para saber que valores
     *  mostrar una vez se haya seleccionado una opcion del primer select
     *  - value que se asignará
     *  - texto que se asignará
     */
    var arrayValores=new Array(
        new Array(1,1,"futbol"),
        new Array(1,2,"balonmano"),
        new Array(1,3,"ciclismo"),
        new Array(2,1,"cocina"),
        new Array(3,1,"fotografia"),
        new Array(3,2,"ceramica"),       
        new Array(3,3,"pintura")
    );
    if(valor==0)
    {
        // desactivamos el segundo select
        document.getElementById("select2").disabled=true;
    }else{
        // eliminamos todos los posibles valores que contenga el select2
        document.getElementById("select2").options.length=0;
       
        // añadimos los nuevos valores al select2
        document.getElementById("select2").options[0]=new Option("Selecciona una opcion", "0");
        for(i=0;i<arrayValores.length;i++)
        {
            // unicamente añadimos las opciones que pertenecen al id seleccionado
            // del primer select
            if(arrayValores[i][0]==valor)
            {
                document.getElementById("select2").options[document.getElementById("select2").options.length]=new Option(arrayValores[i][2], arrayValores[i][1]);
            }
        }       
        // habilitamos el segundo select
        document.getElementById("select2").disabled=false;
    }
}

Código HTML
Código:
<body onload="cambiar()">
<form>
    <p>
     <select id='select1' onchange='cargarSelect2(this.value);'>
     <option value='0'>Selecciona una opcion</option>
  <option></option>
  </select>
    </p>   
    <p>
        <select id='select2' onchange='seleccinado_select2();' disabled>
            <option value='0'>Selecciona una opcion</option>
        </select>
    </p>
    </form>

Página 1 de 1 Todos los horarios son UTC + 1 hora
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/