Я хочу создать элемент выбора в виде цепочки на своей странице, поэтому я использую 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, чтобы найти нужный объект, а затем соответственно изменить второй выбор.
Неважно, если данные содержат небольшое количество элементов.
Но в моем приложении предметов будет больше 40.
То есть:
(data.length>40)==true;
Так что мне интересно, есть ли какие-нибудь хорошие предложения по его улучшению?
Полный пример можно найти здесь:
http://jsfiddle.net/jhS5w/
Кстати, я не могу использовать никакой javascript libray, кроме прототипа 1.4