Buscar temas sin respuesta | Ver temas activos Fecha actual 16 Dic 2017 16:04

Reglas del Foro


Es un foro abierto pero moderado, es decir que cualquier mensaje pasa por el moderador que borrará de inmediato todo lo que suene a spam.



Responder al tema  [ 1 mensaje ] 
 Enlazar un select dependiente con el principal 
Autor Mensaje
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>


05 Ago 2014 13:11
Mostrar mensajes previos:  Ordenar por  
Responder al tema   [ 1 mensaje ] 

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro

Buscar:
Saltar a:  
cron
Desarrollado por phpBB® Forum Software © phpBB Group
Designed by ST Software for PTF.
Traducción al español por Huan Manwë para phpBB-Es.COM