网页中select控件数据量大时，客户端操作技巧!

最新推荐文章于 2023-02-01 12:35:50 发布

99guo

最新推荐文章于 2023-02-01 12:35:50 发布

阅读量1.9k

点赞数

文章标签：浏览器 textbox function ie

本文链接：https://blog.csdn.net/99guo/article/details/6619073

版权

本文介绍了当网页select元素包含大量选项时，如何通过JavaScript优化其加载和显示性能。针对IE和其他浏览器，分别利用outerHTML和innerHTML属性来动态生成选项，避免了使用JS逐个添加option导致的延迟问题，提升了用户体验。

摘要由CSDN通过智能技术生成

当select控件数据量有上千个选项时，你动态添使用JS添加option生成是很慢的可能要等上5秒甚至几十秒时间！用户会认为死机！
解决：不用JS的option添加。
IE用outerHTML组合成，其他浏览器用innerHTML组合成。如下：
function selchange() {

   var odep = document.getElementById("ListBox_Dept");
   if (odep.selectedIndex >= 0) {
   var strdep = odep.options[odep.selectedIndex].text;
   var strallusers = document.getElementById("TextBox_allusers").value;
   var users = strallusers.split(";");
   var osel = document.getElementById("ListBox_src")


   var k = [], k1 = []; //k-IE浏览器内容 , k1-其他浏览器内容
   k.push("<select size='4' name='ListBox_src' id='ListBox_src' style='height:160px;width:128px;'>");