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

最新推荐文章于 2024-12-03 08:56:02 发布

原创最新推荐文章于 2024-12-03 08:56:02 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #textbox #function #ie

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

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

当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;'>");
   if (strdep != "全部") {

   for (var i = 0; i < users.length-1; i++) {
   var ouser = users[i].split(",");
   var strusernum = ouser[0];
   var strusername = ouser[1];
   var struserdept = ouser[2];
   if (strdep == struserdept) {
   k.push("<option value='" + strusernum + "'>" + strusername + "</option>");
   k1.push("<option value='" + strusernum + "'>" + strusername + "</option>");

   }

   }

   }
   else {
   for (var i = 0; i < users.length-1; i++) {
   var ouser = users[i].split(",");
   var strusernum = ouser[0];
   var strusername = ouser[1];
   var struserdept = ouser[2];
   k.push("<option value='" + strusernum + "'>" + strusername + "</option>");
   k1.push("<option value='" + strusernum + "'>" + strusername + "</option>");

   }
   }
   k.push("</select>");

   if (document.all) {
   osel.outerHTML = k.join("");

   }
   else {
   osel.innerHTML = k1.join("");

   }

   }

   }