Javascript 使用json构建链式select
我想在我的页面中构建链式select元素,所以我使用json来保存数据 数据:Javascript 使用json构建链式select,javascript,json,select,Javascript,Json,Select,我想在我的页面中构建链式select元素,所以我使用json来保存数据 数据: var data=[{"name":"Java Language","value":"java","options":[ {"name":"Thinking In Java","value":"tinjava"}, {"name":"Thinking in Pattern","value":"tininpat"}, {"name":"Th
var data=[{"name":"Java Language","value":"java","options":[
{"name":"Thinking In Java","value":"tinjava"},
{"name":"Thinking in Pattern","value":"tininpat"},
{"name":"The Core Java","value":"core_java"}
]},
{"name":"Ruby Language","value":"ruby","options":[
{"name":"Programming Ruby","value":"p_ruby"},
{"name":"The Ruby Guide","value":"ruby_guide"}
]},
{"name":"The JavaScript","value":"js","options":[
{"name":"Jquery In Action","value":"jquery"},
{"name":"Prototype","value":"prototype"},
{"name":"The Core Javascript","value":"core_js"}
]}];
这是构建元素的代码:
var par_select=document.getElementById("par");
var chd_select=document.getElementById("chd");
//init the parenet select
for(var i=0;i<data.length;i++){
var fdata=data[i];
var opt=document.createElement("option");
opt.text=fdata.name;
opt.value=fdata.value;
par_select.appendChild(opt);
}
//bind change event to the par_select
par_select.onchange=function(e){
//clear the data in the child select
chd_select.innerHTML="";
var val=this.options[this.selectedIndex].value;
var sel_data;
//find the selected object
////////// QUESTION !!!!///////////////////
for(var i=0;i<data.length;i++){
if(data[i].value==val){
sel_data=data[i];
break;
}
}
if(sel_data){
var chd_options=sel_data.options;
for(var i=0;i<chd_options.length;i++){
var opt=document.createElement("option");
opt.text=chd_options[i].name;
opt.value=chd_options[i].value;
chd_select.appendChild(opt);
}
}
}
//trigger the change event to the par_select
par_select.onchange();
所以我想知道是否有什么好的建议来改进它
以下是一个完整的示例:
顺便说一句,除了prototype 1.4,我不能使用任何javascript库,我不知道它是否快得多,因为我绝对没有进行基准测试,但总体思路是减少循环数和每个循环的操作数,减少DOM操作数,最好是1,我使用documentFragment将其减少为2:
(data.length>40)==true;