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

来源：互联网发布：如何学软件编程编辑：程序博客网时间：2024/06/05 19:44

当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("");

   }

   }

   }