Hola a todos, tengo un archivo .js un script que me llena un select iterando un arreglo JSON todo muy bien, pero tengo un inconveniente y es que me crea más elementos con valores "undefined", he aquí el código:
Código Javascript
:
Ver originalvar librerias = {
"data":
[
{
"main": "Types",
"text":"Tipos de Datos",
"child":[
{"display": "Enteros, Ordinales", "value": "Ints"},
{"display": "Puntos Flotantes", "value": "Floats"},
{"display": "Cadenas, Char", "value": "Strings"},
{"display": "Punteros", "value": "Pointers"},
{"display": "Otros", "value": "Otros"}
]
},
{
"main": "Strings",
"text": "Cadenas y Char",
"child":[
{"display": "Operaciones", "value": "Calcs" },
{"display": "Convertir desde", "value": "ConvsFrom" },
{"display": "Convertir hacia", "value": "ConvsTo" },
{"display": "Presentación", "value": "Display" }
]
},
{
"main": "PgmStruct",
"text": "Estructura del Programa",
"child":[
{"display": "Control del Programa", "value": "Control" },
{"display": "Datos del Programa", "value": "Data" },
{"display": "Ciclos", "value": "Loops" },
{"display": "Lógica", "value": "Logic" },
{"display": "Orientado a Objetos", "value": "Object" }
]
},
{
"main": "Numbers",
"text": "Números y Conjuntos",
"child":[
{"display": "Cálculos", "value": "Calcs" },
{"display": "Convertir Desde", "value": "ConvsFrom" },
{"display": "Convertir Hacia", "value": "ConvsTo" },
{"display": "Trigonometría", "value": "Trig" },
{"display": "Números por defecto", "value": "Values" },
{"display": "Presentación", "value": "Display" }
]
},
{
"main": "Options",
"text": "Opciones",
"child":[
{"display": "Opciones de Control", "value": "Control" },
{"display": "Opciones de Datos", "value": "Data" }
]
},
{
"main": "DatesAndTimes",
"text": "Fechas y Tiempos",
"child":[
{"display": "Cálculos", "value": "Calcs" },
{"display": "Convertir Desde", "value": "ConvsFrom" },
{"display": "Convertir Hacia", "value": "ConvsTo" },
{"display": "Valores", "value": "Values" },
{"display": "Presentación", "value": "Display" }
]
},
{
"main": "Files",
"text": "Archivos",
"child":[
{"display": "Operaciones", "value": "Control" },
{"display": "Acceso de Datos", "value": "Data" },
{"display": "Manejo", "value": "Strings" }
]
},
]
}
//Cargamos el select principal
for (var i in librerias.data) {
var elem = document.createElement("option");
elem.value = librerias.data[i].main;
elem.innerHTML = librerias.data[i].text;
document.getElementById("main_selection").appendChild(elem)
}
//Aqui cargamos el segundo select de acuerdo a la selección del primero
document.getElementById("main_selection").addEventListener("change", function () {
document.getElementById("sub_selection").innerHTML = "";
var rtl = document.getElementById("main_selection").options[document.getElementById("main_selection").selectedIndex].value;
if (rtl === "Seleccione Por Favor") {
var elem = document.createElement("option");
elem.value = "0";
elem.innerHTML = "Seleccione Por Favor";
document.getElementById("sub_selection").appendChild(elem);
}
for (var i in librerias.data) {
if (librerias.data[i].main === rtl) {
for (var a = 0; a < librerias.data[i].child.length; a++) {
var elem = document.createElement("option");
elem.value = librerias.data[i].child[a].value;
elem.innerHTML = librerias.data[i].child[a].display;
document.getElementById("sub_selection").appendChild(elem);
}
}
}
});
El resutado es el siguiente:
Lo curioso es que lo he probado en jsFiddle.net y no sucede eso.
¿Alguna idea?.