算法挑战：大批量数据插入到select中

同意，如果是你的老板要求将50万数据放到页面的select中的话，不是他疯了的话，那肯定会让页面的访问者疯掉的！

要做级连或者optgroup了，否则
可以把这个东西写进工作记录里了，
几点－几点　　＂找下拉框里的值＂

哈哈。
模拟SELECT分段加载。

呵呵，反响强烈啊，可惜就是没有算法的。举例说吧，有关彩票的，几百万个号码，一级一级进行过滤，总有几十万个号码要显示吧，但并不是要用户去一个个筛选，只是一个结果集的反馈而已,只显示数字还不太友好。To：btbtd(转型(L/C)AMP)
JS的极限取决于客户端机器的配置, 你搞这个有啥意思...
机器配置一定的情况下，有的算法是更快的。存在就是有道理的。To:hbhbhbhbhb1021(天外水火(我要多努力))
要做级连或者optgroup了？小生愚昧，还不太懂你的意思muxrwc(十月，期待)
分段加载是好，但最终还是要显示的。我甚至还想过多线程呢，呵呵！

分页也不是太好，要查个东西还是要查很久，做级连就是说把上面分成多个下拉框
就是说第一个下拉框是查询条件
比如查询以什么什么开头的，比如以A开头，第二个就把数据中以A开头的数据显示出来，这样用户会容易找些，太多的话做三级、四级... ...
做optgroup的方法就是把相互之间有联系的分成一组，不过感觉数据一般多的话可以使用，你的太多了这个方法也不太好使用，例如下面的
<select>
<optgroup label="a">
<option value="aaa1">aaa1</option>
<option value="aaa2">aaa2</option>
</optgroup>
<optgroup label="b">
<option value="baa1">baa1</option>
<option value="baa2">baa2</option>
</optgroup>
</select>

js 比我相像的还能强大...不知道学习JS 和学习JAVA 之间那个强了会更好一点.

举例说吧，有关彩票的，几百万个号码，一级一级进行过滤，总有几十万个号码要显示吧，但并不是要用户去一个个筛选，只是一个结果集的反馈而已,只显示数字还不太友好。
如果你用一个select元素。。显示1篇就够了。。干什么非要全读出来。。如果它往下拽，你继续在读数据不就可以了？分步和一次加载的效果不都是一样的。。模拟一个select元素弄成分步加载不就行了。。如果用户按下a了。你在从数据库里取top 若干 a%
读出来。。然后追到模拟的select元素里面不就行了。。
不过处理麻烦写。。还需要判断里面有多少。。a需要不需要载入。
还有要控制select元素内元素的量（这样能保证效率）

你要生成 20万节点的数据，总共 6.8MB 的HTML代码量，从拼接生成到插入浏览器到浏览器渲染，再怎么也快不了。你的脚本已经使用 Array.join() 思想了，已经不慢了，所以你还是换个思路吧，我对你的代码做了点优化，可以只要目前的3/5的时间，不能再少了。

To:muxrwc(十月，期待)
偶这个都是号码，做级别有点别扭，呵呵To:meizz(梅花雪)
能否告知哪里还能节约2/5的时间呢？谢谢!

你也注意到了countrise.style.visibility='hidden'后再countrise.style.visibility='';加上join()，已经很不错了!关键你这个需求就是不可接受的！如果你硬要这么做，建议采用动态加载的方式，即先加载一定数量条数如100条，然后用户滚动数据到底部时再继续加载100条，如此直到加载完所有数据！可以参考dhcombobox里的处理方式：
http://www.v-ec.com/dh20156/article.asp?id=15

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body><script>   function doProcess() {
        var dt   =   new   Date();
var countrise = List;
var objOptions = new Array();
var temp ="";
countrise.style.visibility='hidden';
objOptions[0]="<select name='List' size='10' style='WIDTH: 200pt; HEIGHT: 170pt'>";
for(var i=1 ; i<=20000 ; i++) {
objOptions[i]="<option value=" + i + ">" + i + "</option>";
}
objOptions[20001]="</select>";
countrise.outerHTML=objOptions.join("");
countrise.style.visibility='';
        var dt1 = new Date();
        alert(dt1.getTime()-dt.getTime());
   }

      function doProcess2() {
        var dt   =   new   Date();
var countrise = List;
var objOptions = new Array();
var temp ="";
countrise.style.visibility='hidden';
objOptions[0]="<select name='List' size='10' style='WIDTH: 200pt; HEIGHT: 170pt'>";
for(var i=1 ; i<=20000 ; i++) {
objOptions[i]="<option>" + i ;//value=..和</option>都可以省略
}
objOptions[20001]="</select>";
countrise.outerHTML=objOptions.join("");
countrise.style.visibility='';
        var dt1 = new Date();
        alert(dt1.getTime()-dt.getTime());
   }

      function doProcess3() {
        var dt   =   new   Date();
var countrise = List;
var objOptions = new Array();
var temp ="";
countrise.style.visibility='hidden';
objOptions[0]="<select name='List' size='10' style='WIDTH: 200pt; HEIGHT: 170pt'>";
for(var i=1 ; i<=20000 ; i++) {
objOptions[i]= i ;
}
objOptions[20001]="20001</select>";
countrise.outerHTML=objOptions.join("<option>");
countrise.style.visibility='';
        var dt1 = new Date();
        alert(dt1.getTime()-dt.getTime());
   }

</script>

   <select name=List></select>
   <input type=button value=test onclick="doProcess();"/>
   <input type=button value=test2 onclick="doProcess2();"/>
   <input type=button value=test3 onclick="doProcess3();"/>
   <input type=button value=test onclick="doProcess();"/>

</body></html>

countrise.style.visibility='hidden';
这一句加不加无所谓，起不到什么作用。
-----用dom的方式加option的话，加上这一句才会起到较大的作用。

To:JK_10000(JK) ( )
看了达达同学的三个方式，doProcess3()做2万的数据量的确是快了近200毫秒，非常之高了。
objOptions[i]= i ;
countrise.outerHTML=objOptions.join("<option>");
主要区别在以上两句中，本还以为基于标签的最好是保障标签的完整性，哪知objOptions[i]= i ;这样也行，又学到了一招，省了不少时间。JS的动态功能真是非常的强大！感谢！
来的都是星星与钻石的用户，不简单那，嘿嘿！经过这几天的思考，决定以每屏2000，基于doProcess3()的方式，再加之分页，是可以实现我的初衷想法的！再次感谢大家！

貌似发现一个问题：
以
objOptions[i]="<option>" + i ;//value=..和</option>都可以省略
objOptions[20001]="</select>";
countrise.outerHTML=objOptions.join("");
进行操作，得到的列表集合个数是正确的
以
objOptions[i]= i ;
objOptions[20001]="</select>";
countrise.outerHTML=objOptions.join("<option>");
进行的操作，就会在列表集合中增加一个空项，现在才发现“JK_10000(JK)达人” 的良苦用心，要在最后objOptions[20001]="20001</select>";这样写，只有这样才不会产生空项。
我说怎么试了半天都有问题呢，功夫真不是盖的。得仔细看看join()的实现方式。

调试易

算法挑战：大批量数据插入到select中

解决方案 »