请问JS遍历select元素时如何提高效率？

我现在用的是以下方法
for (var j = 0; j < $get(rightBox).options.length; j++) {}但发现如果当数据量大时，就会非常慢，如达到10000条记录，有什么办法可以处理大数据量的遍历呢？谢了！

解决方案 »

  1.   

    for (var j = 0,n=$get(rightBox).options.length; j < n; j++) {} 
    首先改成这样
      

  2.   

    for (var j = 0; j < $get(rightBox).options.length; j+=10) {} 这样看看快点不
      

  3.   

    支持1L，如果是j < $get(rightBox).options.length，每次都会执行$get(rightBox)，所以慢
      

  4.   

    我用的是SQL2008，现在是从数据库里获取数据后在客户端显示，与数据库无关的，主要是构建HTML元素的时间太长了，而且这个是一个select元素
      

  5.   

    既然用到sql，查询数据表后，为什么不直接把行数赋值给一javascript变量呢？为什么还要客户端遍历？
    而且10000条数据稍嫌多，客户使用起来也不怎么方便，可以模拟个下拉框，结合ajax autocomplete.
      

  6.   

    我在做遍历主要是为了动态创建select的option，基本代码如下 
     for (var i = 0, n = items.Tables[0].Rows.length; i < n; i++) {
                var addOption = document.createElement("option");
                addOption.text = items.Tables[0].Rows[i].Description;
                addOption.value = items.Tables[0].Rows[i].CODE;
                $get(listbox).add(addOption);
            }
    其中items是使用AjaxMethod返回的一个dataset，由于要获取所有数据让用户使用，所以数量会比较多，至于8楼说的放到一个JS变量里，那最终也需要生成select的，而且现在已经是从JS变量里去操作的了，主要是循环和构建的过程太慢了
      

  7.   

    用innerHTML来组织应该会快一点，类似这样
    <html>
    <body>
    <div id='temp'>
    </div>
    <script type='text/javascript'>
    var $ = function($){return document.getElementById($);}
    var k=[];
    k.push("<select id='ff' name='ff'>");
    for(var i=0;i<10000;i++){
    k.push("<option value='"+i+"'>"+i+"</option>");
    }
    k.push("</select>");
    $('temp').innerHTML = k.join("");
    </script>
    </body>
    </html>
      

  8.   

    var rows = items.Tables[0].Rows, obj = $get(listbox), i = 0, l = rows.length;
    for (; i < l; i++) {
    var addOption = document.createElement("option");
    addOption.text = rows[i].Description;
    addOption.value = rows[i].CODE;
    obj.add(addOption);
    }
      

  9.   

    自己写个List控件，首先不会显示那么多条记录，要知道在浏览器上10000条记录的设计就已经是错的了，可以首先显示100条，等用户拖动滚动条到第90条时再显示下100条，依次类推最初的数据可以存在js变量中，当然最好使用ajax来动态加载，Google的docs中的列表就是这样实现的js的速度相对vbscript要快很多，但相对于C#/java等那是要慢很多的，而且你这里单纯使用js也没有什么问题，主要是还得操作dom元素，这样就慢下来了
      

  10.   

    支持11楼
    用innerHTML会快很多的
      

  11.   


    嗯，这个方法应该不错，只是现在我的需求还有点变化，就是我要对现有已存在的select去操作的，如果按上面的方法，我可能需要修改很多代码才能实现哦:(
      

  12.   

    坏就坏在ie不支持select控件的innerHTML，firefox是支持的。
      

  13.   

    <html>
    <body>
    <select id='ff' name='ff'>
    </select>
    <script type='text/javascript'>
        var $ = function($){return document.getElementById($);}
        var k=[];
        k.push("<select id='ff' name='ff'>");
        for(var i=0;i<10000;i++){
            k.push("<option value='"+i+"'>"+i+"</option>");
        }
        k.push("</select>");
        $('ff').outerHTML = k.join("");
    </script>
    </body>
    </html>
    这样就用不着改了吧
      

  14.   

    不错，呵呵。ie就用outerHTML，firefox就用innerHTML..
    逻辑代码如下
    <html>
    <body>
    <select id='ff' name='ff'>
    </select>
    <script type='text/javascript'>
        var $ = function($){return document.getElementById($);}
        var k=[],k2=[];
        k.push("<select id='ff' name='ff'>");
        for(var i=0;i<10000;i++){
            k.push("<option value='"+i+"'>"+i+"</option>");
    k2.push("<option value='"+i+"'>"+i+"</option>");
        }
        k.push("</select>");
    if(ie){
    $('ff').outerHTML = k.join("");
    }
    else if(firefox){
    $('ff').innerHTML = k2.join("");
    }
    </script>
    </body>
    </html>
      

  15.   


    That's great!!!
    这样用后速度简直不用等，马上就全部显示出来了，呵呵，谢谢大家的帮助啦！！！