HTML selectObject에 많은 수의 항목을 추가하는 방법

Question

각각 수천 (8192) 개의 항목이있는 페이지에 8 개의 selectObject 풀다운 객체를 채워야합니다. 현재 자바 스크립트에서이 방법을 알고 있습니다.

var iCount; 
var option1; 
var selectObject1 = document.getElementById('ifbchan'); 
for(iCount = 0; iCount < 8192; iCount++) 
    { 
    option1=document.createElement("option"); 
    option1.text = "Out " + iCount; 
    option1.value=iCount; 
    try 
     { 
     selectObject1.add(option1, selectObject1.options[null]); 
     } 
    catch (e) 
     { 
     selectObject1.add(option1, null); 
     } 
    } 
selectObject1.selectedIndex = 0; 

이 방법은 정상적으로 작동하지만 속도가 매우 느립니다! 각각의 8K 루프는 완료하는 데 10 초 정도 걸립니다. 8 개의 다른 루프를 곱하면 문제가 분명합니다. 더 빠른 드롭 다운 목록에 많은 수의 항목을 추가하는 다른 방법이 있습니까? 큰 목록의 항목을 표시하는 드롭 다운 컨트롤보다 빠른 대안은 무엇입니까? 어떤 아이디어 주셔서 감사합니다.

~ 팀은

Answer 1

나는 다음을 시도 것 :

var elements = "" 
var i; 
for(i= 0; i < 8192; i++){ 
    elements += "<option value='"+ i + "'>Out " + i + "</option>"; 
} 


document.getElementById("ifbchan").innerHTML = elements; 

이 방법 만 반복하지 8000+ 당 DOM에 하나 개의 동작을 수행합니다.

아, 그리고 여기에 앞서 준비 하나 : 대답하기 전에 http://jsfiddle.net/3Ub4x/

Answer 2

몇 가지.

우선이 작업을 수행하는 가장 좋은 방법은 서버 측 구현이라고 생각하지 않습니다. 클라이언트에서 작업을 수행 할 수 있으면 서버를 만지지 말고 보안과 관련이없는 경우이 작업을 수행해야합니다.

두 번째 이유 - 정확히 선택 목록에 8000 개의 요소가 필요한 이유는 무엇입니까? 요소를 선택하기 위해 8000 개의 요소를 스크롤하려는 앱의 사용자라고 생각하십니까? 이전에 언급했듯이 자동 완성 사운드가 훨씬 적합합니다.

이

원래 접근 방식은 here입니다 : 지금

그리고

는 대답은 (당신은 스크립트를 실행하고 관리자를 확인하여이를 볼 수 있습니다) 10000 요소를 완료하는 데 약 1724 밀리 초 걸립니다.

var start = new Date(); 
var n = 10000; 

var iCount; 
var option1; 
var selectObject1 = document.getElementById('ifbchan'); 
for(iCount = 0; iCount < n; iCount++) 
    { 
    option1=document.createElement("option"); 
    option1.text = "Out " + iCount; 
    option1.value=iCount; 
    try 
     { 
     selectObject1.add(option1, selectObject1.options[null]); 
     } 
    catch (e) 
     { 
     selectObject1.add(option1, null); 
     } 
    } 
selectObject1.selectedIndex = 0; 

var time = new Date() - start; 
console.log(time); 

이 코드를 많이 좋아하지 않는다 (너무 많은 라인이다) 그래서 나는 JQuery와에 다시 작성합니다.

var start = new Date(); 
var n = 10000; 

for (var i = 0; i<n; i++){ 
    $("#ifbchan").append("<option value="+i+">"+i+"</option>") 
} 

var time = new Date() - start; 
console.log(time); 

다음 피들은 here입니다. 훨씬 적은 라인과 약간의 시간 개선. 이제는 밀리 초입니다. 그러나 모든 루프에 새로운 요소를 추가합니다.

다음 fiddle이 것을 제거하십시오.

var start = new Date(); 
var n = 10000; 

var html = ''; 
for (var i = 0; i<n; i++){ 
    html += "<option value="+i+">"+i+"</option>"; 
} 

$("#ifbchan").append(html); 

var time = new Date() - start; 
console.log(time); 

와우, 지금은 140 밀리 초이다.