我想在我的页面中构建链式选择元素,所以我使用json来保存数据。
数据:
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();
我已经成功了。
但我想知道是否有任何方法可以让它快速?
因为在我的实现中,当第一个选择改变时,我必须迭代json数据以找到正确的对象,然后相应地改变seconde选择。
数据是否包含少量项目并不重要。
但在我的应用程序中,这些项目将超过40个。
那就是说:
(data.length>40)==true;
所以我想知道是否有任何改善它的好建议?
可在此处找到完整示例:
顺便说一下,除了原型1.4 ,我不能使用任何javascript libray答案 0 :(得分:0)
不知道它是否更快,因为我绝对没有基准测试,但一般的想法是减少循环的数量和每个循环的动作数量并减少DOM动作的数量,最好是1,我减少它使用documentFragment到2: http://jsfiddle.net/jhS5w/7/