Javascript 使用json构建链式select

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

我想在我的页面中构建链式select元素,所以我使用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();
所以我想知道是否有什么好的建议来改进它

以下是一个完整的示例:


顺便说一句,除了prototype 1.4,我不能使用任何javascript库,我不知道它是否快得多,因为我绝对没有进行基准测试,但总体思路是减少循环数和每个循环的操作数,减少DOM操作数,最好是1,我使用documentFragment将其减少为2:

(data.length>40)==true;