<html> <head> <script type="text/javascript"> window.onload = function(){ var startTime = new Date().getTime(); // 开始时间 // 创建文档碎片 var oFragmeng = document.createDocumentFragment(); var obj = document.getElementById('ct'); for(var i=0; i<10000; i++){ var op = document.createElement("option"); op.innerHTML = "t_" + i; op.value = "v_" + i; oFragmeng.appendChild(op); } obj.appendChild(oFragmeng); var endTime = new Date().getTime(); // 结束时间 alert("耗时:" + (endTime - startTime) + " 毫秒!"); } // 清空列表框元素 // 方式一 function clearOptionsV1(id){ document.getElementById(id).options.length = 0; } // 方式二 function clearOptionsV2(id){ document.getElementById(id).innerHTML = ""; } // 方式三 function clearOptionsV3(id){ var selectObj = document.getElementById(id); var parentNode = selectObj.parentNode; var newSelectObj = selectObj.cloneNode(false); parentNode.replaceChild(newSelectObj, selectObj); } // 添加下拉框元素 // 方式一 function addOptionsV1(id){ var obj = document.getElementById(id); obj.options.add(new Option("V1", "v1")); } // 方式二 function addOptionsV2(id){ var obj = document.getElementById(id); var op = document.createElement("option"); op.innerHTML = "V2"; op.value = "v2"; obj.appendChild(op); } // 方式三 function addOptionsV3(id, iLength){ var obj = document.getElementById(id); obj.options.length = iLength; for(var i=0; i<iLength; i++){ obj.options[i].text = "V3_" + i; obj.options[i].value = "v3_" + i; } } </script> </head> <body> <input type="button" value="[清空V1]" onclick="clearOptionsV1('ct');"> <input type="button" value="[清空V2]" onclick="clearOptionsV2('ct');"> <input type="button" value="[清空V3]" onclick="clearOptionsV3('ct');"><br> <input type="button" value="[添加V1]" onclick="addOptionsV1('ct');"> <input type="button" value="[添加V2]" onclick="addOptionsV2('ct');"> <input type="button" value="[添加V3]" onclick="addOptionsV3('ct', 100);"><hr> <select id="ct"> <option value="1">a1</option> <option value="2">a2</option> <option value="3">a3</option> <option value="4">a4</option> <option value="5">a5</option> <option value="6">a6</option> </select> </body> </html>
Ps:如果使用[清空V3]后,则不能使用[添加V2]进行数据的添加。