Select que va a otro select

garcia1808 · #1 (**permalink**) 05/08/2013, 17:38

Buenas, el codigo me funciona, elijo de un select y me muestra la info en el otro, pero luego cuando lo vuelvo a hacer no funciona, queda en la primera que me mostro. Espero que se entienda.

Les dejo el codigo.

var s1 = ['seleccione','1','2','3'];
var s2 = ['11','12','13'];
var s3 = ['21','22','23'];
var s4 = ['31','32','33'];
var select1 = document.createElement('select');
var select2 = document.createElement('select');
document.body.appendChild(select1);
document.body.appendChild(select2);

for ( x = 0 ; x < s1.length ; x++) {
var option = document.createElement('option');
option.innerHTML = s1[x];
select1.appendChild(option);
}

select1.onchange = function () {
var contaglobal = [];
var conta = select1.value;
if ( conta == "1"){
contaglobal = s2 ;
} else if ( conta == "2") {
contaglobal = s3;
} else {
contaglobal = s4;
}

for( var o = 0; o < contaglobal.length; o++ ){
var opcion = document.createElement('option');
opcion.innerHTML = contaglobal[o];
select2.appendChild(opcion);
}
}

Muchas Gracias

quimfv · #2 (**permalink**) 06/08/2013, 03:09

contaglobal debe ser una variable global, la reinicias dentro de la función pero debes definirla fuera de toda funció...

Creo...

Código Javascript:

Ver originalvar s1 = ['seleccione','1','2','3'];
var s2 = ['11','12','13'];
var s3 = ['21','22','23'];
var s4 = ['31','32','33'];
var select1 = document.createElement('select');
var select2 = document.createElement('select');
 
//Inicializació
var contaglobal = new Array();
document.body.appendChild(select1);
document.body.appendChild(select2);
 
 
for ( x = 0 ; x < s1.length ; x++) {
var option = document.createElement('option');
option.innerHTML = s1[x];
select1.appendChild(option);
}
 
select1.onchange = function () {
//Reiniciación
contaglobal = new Array();
var conta = select1.value;
if ( conta == "1"){
contaglobal = s2 ;
} else if ( conta == "2") {
contaglobal = s3;
} else {
contaglobal = s4;
}
 
 
for( var o = 0; o < contaglobal.length; o++ ){
var opcion = document.createElement('option');
opcion.innerHTML = contaglobal[o];
select2.appendChild(opcion);
}
}

garcia1808 · #3 (**permalink**) 06/08/2013, 17:19

Gracias, pero sigue sin funcionar. Saludos!!!

quimfv · #4 (**permalink**) 07/08/2013, 02:30

Ahora funciona

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
<script language="JavaScript" type="text/JavaScript">
var s1 = ['seleccione','1','2','3'];
var s2 = ['11','12','13'];
var s3 = ['21','22','23'];
var s4 = ['31','32','33'];
var select1 = document.createElement('select');
var select2 = document.createElement('select');
//Inicializació
var contaglobal = new Array();
//Agregamos un identificador
select1.setAttribute("id","select1"); 
select2.setAttribute("id","select2"); 
document.body.appendChild(select1);
document.body.appendChild(select2);
for ( x = 0 ; x < s1.length ; x++) {
    var option = document.createElement('option');
    option.innerHTML = s1[x];
    select1.appendChild(option);
    }
select1.onchange = function () {
    //Reiniciación
    contaglobal = new Array();
    var conta = select1.value;
    if ( conta == "1"){
        contaglobal = s2 ;
    } else if ( conta == "2") {
        contaglobal = s3;
    } else {
        contaglobal = s4;
    }
    //Eliminamos las opciones anteriores de select 2
    for( var o = 0; o < document.getElementById("select2").options.length; o++ ){
        document.getElementById("select2").remove(0);//Siempre la primera
    } 
    //Creamos las nuevas
    for( var o = 0; o < contaglobal.length; o++ ){
        var opcion = document.createElement('option');
        opcion.innerHTML = contaglobal[o];
        select2.appendChild(opcion);
    }
}</script>
</html>