jQuery를 사용하여 많은 선택 옵션 목록 추가

Question

나는 몇 개의 선택 목록을 복제하고 DOM의 다른 요소에 추가하기 위해 javascript를 사용하고 있습니다. 이리스트들 중 하나는 29843 옵션과 같이 매우 큽니다. 한 번만 추가하고 연결하는 대신 배열을 사용하는 등 jQuery의 append 메서드의 성능을 향상시키는 데 유용한 팁을 많이 읽었습니다. 아래 코드는 이러한 관행을 위반하지 않는다고 생각하지만 추가 메서드를 호출하면 브라우저 (Chrome 포함)가 중지됩니다.

var rows = $('.runRow'); 
var envOpts = rows[0].children[1].children[0].innerHTML; // contains 3 <option> tags 
var sumOpts = rows[0].children[2].children[0].innerHTML; // contains 29843 <option> tags 

var newRow = "<span class=\"runRow\">"; 
newRow += "<span>Run " + (numRuns++) + "</span>"; 

newRow += "<span><select id=\"Environment" + numRuns + "\" name=\"Environment" + numRuns + "\">"; 
newRow += envOpts; 
newRow += "</select></span>"; 

newRow += "<span><select id=\"SummaryID" + numRuns + "\" name=\"SummaryID" + numRuns + "\">"; 
newRow += sumOpts; 
newRow += "</select></span>"; 

newRow += "</span>"; 

$('#RunsTable').append(newRow); 

자바 스크립트를 너무 많이 요청하고 있습니까, 아니면이 작업을 수행 할 수있는 방법이 있습니까?

감사합니다.

Answer 1

너무 많이 묻습니다. jQuery, 또는 심지어 자바 스크립트 일 필요는 없습니다. James Montagne의 의견에서 알 수 있듯이, 드롭 다운 메뉴 아이디어를 사용하면 운영 체제/윈도우 프레임 워크가 잘 수행 할 수있는 범위 밖일 수 있습니다.

30k 옵션이 분류 된 다음 사용자에게 드롭 다운 목록으로 표시되는 계층 적 접근 방법을 고려 했습니까?

Answer 2

가능한 경우 옵션을 그룹으로 나누고 다른 옵션에 따라 그룹화하는 것이 좋습니다. 하지만 왜 도대체 28000 (!) 옵션이 필요합니까 ???

Answer 3

폴과 댄에 동의합니다. 내가 거대한리스트를 구현하는 것을 특히 좋아하는 또 다른 옵션은 자동 완성 (autocomplete)이다. AJAX를 호출하여 키 스트로크를 기준으로 상위 10 가지를 선택하면 30K를 끌어 오는 것보다 훨씬 효율적입니다.

Answer 4

좋아요, 여기는 현재 시도하고있는 것보다 빠르지 만 여전히 느립니다. 실제로 javascript를 사용하여 30k 옵션을 만들고 표시하므로 여기에서 실제로 시스템을 사용하고 있습니다. 내 2 년 된 노트북에서 렌더링하는 데 약 60 초가 걸립니다. += string보다 중요한 성능 향상을 제공하는 array.push 및 join을 사용하여 시작하십시오.

http://jsfiddle.net/yuTtK/1/ - 누군가의 브라우저를 습격하지 않도록 링크의 기본값은 300입니다.

//create an option list with 30k options 
var options = []; 
for (var i = 0; i< 30000; i++) { 
    options.push('<option>'+i+'</option>'); 
} 
$('select').append(options.join('')); 

//copy each select list item onto the page 
var myArray = []; 
var list = $('option'); 
for (var j=0; j < list.length; j++) { 
    myArray.push('<span>'+list[j].innerHTML+'</span><br/>'); 
} 
$('body').append(myArray.join('')); 

는이 목록을 통해 반복 할 때 브라우저가 응답 있도록 시간 제한 및 로딩 메시지를 사용할 수있는이 더 사용자 친화적 확인하십시오.