大数据量下的select框全选的效率问题

最新推荐文章于 2025-06-20 14:12:01 发布

转载最新推荐文章于 2025-06-20 14:12:01 发布 · 2.8k 阅读

·

0

·

文章标签：

#function #input #button #javascript #html #div

经验技巧之Javascript 专栏收录该内容

61 篇文章

订阅专栏

本文探讨了在包含7000个选项的multiple select框中实现全选功能的方法，并提供了一种改进方案，通过隐藏select框并修改option状态来提高效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个multiple的select框，里面有7000个option, 我用下面的js(我看过一般都是这样写的)实现全选时需时60秒，问有没有方式可以快速全选的？？谢谢

function checkall(form)
{
var mlist = document.getElementById('com_selected');
for(var i=0;i<mlist.options.length;i++)
{
var e=mlist.options[i];
e.selected=form.selectall.checked;
}
}

TRY:

<div id="dv"> </div><p>

<script language="javascript">

var obj = new Array();

for(i=0;i<7000;i++){

obj[i] = "<option value=""+i+"">opt "+i+"</option>";

}

var selectstr = "<select id="st" size="20" style="width:80%" multiple>"+obj.join('')+"</select>"

dv.innerHTML = selectstr;

function selectAllA(obj){

var n = obj.children.length;

for(var b=0;b<n;b++){

obj.children[b].selected = true;

}

}

function selectAllB(obj){

var oldstr = obj.outerHTML;

var reg = /<option/ig;

var newstr = oldstr.replace(reg,"<option selected");

dv.innerHTML = newstr;

}

</script>

<p>

<input type="button" value="Select All A" onclick="selectAllA(st);">

<input type="button" value="Select All B" onclick="selectAllB(st);">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body>

<form name=formA>

<input name=selectall type=checkbox onclick="document.getElementById('com_selected').style.visibility='hidden';setTimeout('checkall(document.formA);',10)" >

<select name=com_selected multiple size=10 >

<script>

for(var i=0;i<7000;i++)

document.write("<option value=1>"+i+"</option>");

</script>

</select>

</form>

</body>

</html>

<script>

function checkall(form)

{

var mlist = document.getElementById('com_selected');

var mlistOptions=mlist.options;

var trueOrFalse=form.selectall.checked;

for(var i=mlistOptions.length-1;i>-1;i--)

{

mlistOptions[i].selected=trueOrFalse;

}

mlist.style.visibility="";

}

</script>

Top

1。尽量减少for循环里对象的调用层次

var e=mlist.options[i];

e.selected=form.selectall.checked;

//mlist.options可以拿到循环外取

//form.selectall.checked也可以拿到循环外取

2。select是个怪胎，可以先把它隐藏再改option的选中状态，改完后再显示select，以减少显示时间

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。