Question

我想在我的页面中构建链式选择元素，所以我使用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;

所以我想知道是否有任何改善它的好建议？

可在此处找到完整示例：

http://jsfiddle.net/jhS5w/

顺便说一下，除了原型1.4

，我不能使用任何javascript libray

Answer 1

不知道它是否更快，因为我绝对没有基准测试，但一般的想法是减少循环的数量和每个循环的动作数量并减少DOM动作的数量，最好是1，我减少它使用documentFragment到2： http://jsfiddle.net/jhS5w/7/

使用json构建链式选择

1 个答案: