20 개의 동일한 동일한 listBoxes 렌더링

Question

행 (20 행)이있는 HTML 테이블이 있습니다. 모든 행에는 데이터베이스의 단일 데이터 집합을 사용하여 채워지는 국가 목록 상자 (약 250 개 국가)가 있습니다.

로딩 시간은 충분히 빠르지 만 렌더링 시간은 정말 엉망입니다. 이러한 목록 상자의 렌더링 속도를 향상시킬 수있는 방법이 있습니까?

Answer 1

한 번만로드하고 당신이 그것을 필요로 사방 DOM 요소를 복사 할 수 ...

나는 그것이 사용자의 컴퓨터에 더 의존하는 것이기 때문이 많이 개선한다면 모르겠지만, 나는 그것이 지금 너무 느리다면 시도해 볼 가치가 있다고 생각합니다.

편집 : 여기 어떻게할까요? 주의 깊게 사용하고 테스트하지는 않았지만이 코드에는 많은 오류가있을 수 있습니다. 단지 내가 말한 것에 대한 아이디어를 제공하는 것입니다. jQuery를 사용하여

문서 준비에

<mylistbox id="listboxtemplate"> ... </> 

<div class="thisPlaceNeedsAListbox"></div> 
<div class="thisPlaceNeedsAListbox"></div> 
<div class="thisPlaceNeedsAListbox"></div> 

:

jQuery(".thisPlaceNeedsAListbox").append(jQuery("#listboxtemplate").clone()) 

Answer 2

당신은 사용자가 이전 (JavaScript를 사용)를 선택한 후에 만 ​​다음 선택 상자를 추가 할 수 있습니다.

양식이나 프로세스를 다시 생각해 볼 수는 있지만, 충분한 정보를 제공하지 않았기 때문에 구체적인 것은 제안 할 수 없습니다. 예를 들어 상황에 따라 다중 선택 또는 멋진 자바 스크립트 위젯을 사용할 수 있습니다. 귀하의 의견에 따라

편집 : 다음

방법을 선택하지 않고 테이블을 제공에 대해. 사용자가 국가 필드를 두 번 클릭하면 텍스트 요소를 변경하여 javascript를 사용하여 요소를 선택합니다. 사용자가 국가를 선택하면 텍스트 요소로 다시 변경할 수 있습니다. Ajax (사용자가 국가를 선택한 후)를 사용하거나 숨겨진 필드 인 제출 버튼을 사용하여 결과를 서버에 다시 제출할 수 있습니다. 이렇게하면 DOM에는 절대로 select 요소가 하나 이상 포함되지 않습니다.

인라인 JSON 개체/배열 (스크립트 태그)을 사용하여 국가를 자바 스크립트로 전달할 수 있습니다. 사용자가 첫 번째 요소를 편집 한 후에 작업을 더 빠르게하려면 첫 번째 빌드 선택 요소를 숨기고 (css : display : none;) 사용자가 행을 편집하려고 할 때마다이를 복제/이동하십시오.

이 방법을 사용하면 많은 경로를 볼 수 있지만 최적화/작업하려는 정도에 따라 달라집니다.