10,000 개의 가능한 값과 순서-중요한 드롭 다운 vs. 우아한 탈퇴를 가진 드롭 다운

StackOverflow https://stackoverflow.com/questions/2239865

문제

배경

JavaScript를 사용하여 ~ 5k 항목 (공급 업체)을 통해 독점적으로 JavaScript를 사용하는이 양식이 있습니다. 지금은 JavaScript에 대한 형식입니다. JavaScript 오류가 더 이상 양식을 사용할 수 없게 만들지 않도록하고, 항목의 수와 항목의 순차적 특성으로 인해 기본 HTML 버전 만 제공 할 수있는 관용적 방법없이 나를 남겨 둡니다.

문제

순차적/계층 적 드롭 다운

시퀀스가 중요한 예제 드롭 다운 :http://www.javaScriptKit.com/javatutors/selectContent2.shtml

따라서 순차적/계층 적 드롭 다운 컨텐츠의 "필터링"을 보여줍니다. 여기서 두 번째 도시 드롭 다운의 선택은 첫 번째 국가 드롭 다운의 선택에 따라 필터링됩니다. 그러나 JavaScript를 제거하면 즉시 엉망이 될 수 있습니다. 미국의 마드리드? 프랑스 베를린? 시퀀스가 손상됩니다.

수많은 옵션이있는 드롭 다운

10K 가능한 옵션이있는 선택 드롭 다운이있는 경우 JavaScript로 필터링/검색하기가 매우 쉽습니다. 반면에 Javacript없이 이러한 옵션을 다루는 것은 훨씬 더 어렵습니다.

모든 옵션을로드 할 때 모든 가능성을 사용자에게 제공하는 방법은 모두 브라우저를 폭파시킬 수 있습니까?

가능한 해결책

순차적/계층 적 선택 상자 :

  • 서버 측 2 부분 양식.
  • 옵션 그룹을 선택 하시겠습니까?
  • ???

수많은 옵션으로 선택합니다.

  • 서버 측 2 부분으로 구성된 검색 양식.
  • 항목 이름의 서버 측 텍스트 검색.
  • ???

풍부한 솔루션에 대한 간단한 링크를 환영합니다.

도움이 되었습니까?

해결책

내가 생각할 수있는 유일한 해결책은 결과를 좁힐 때마다 양식 제출을 사용하는 것입니다. 공급 업체의 국가를 선택하기 위해 페이지를 표시하여 시작합니다. 이는 선택한 국가를 텍스트로 보여주는 페이지를 제출하고 반환하고 이제 도시와 같은 다음 필드를 선택할 수있는 드롭 다운이 있습니다. 그런 식으로, 섬기는 사람 각 레벨에서 필터링을 수행 할 수 있습니다.

JSP 예는 다음과 같습니다.

<c:choose>
    <c:when test="${empty country}">
        Country: 
        <form>
            <select>
                <option value="USA">America</option>
                <option value="DEU">Germany</option>
                <%-- ... --%>
            </select>
        </form>
    </c:when>
    <c:otherwise>
        Country: ${country} 
        <c:choose>
            <c:when test="${empty city}">
                <input type="submit" value="Change" />   <%-- Button to change the previous value --%>

                <%-- your form for choosing a supplier's city --%>                    
            </c:when>
            <c:otherwise>
                <%-- continue filtering until you have all of the data --%>
            </c:otherwise>
        </c:choose>

    </c:otherwise>
<c:choose>

국가를 선택하면 양식이 제출됩니다. 서버가 국가를 처리하고 동일한 페이지를 country 다음 드롭 다운을위한 현장 가치와 가능한 도시 목록. 이렇게하면 데이터를 순차적으로 필터링하기 위해 양식 제출 (자바 스크립트가 아닌)에만 의존 할 수 있습니다. 서버는 사용자가 얼마나 멀리 떨어져 있는지 추적 할 책임이 있습니다. 이 솔루션의 명백한 몰락은 모든 중첩이있는 JSP가 꽤 지저분하다는 것입니다. <c:choose> 블록.

하이브리드 솔루션을 시도 할 수도 있습니다. 페이지로드되면 JavaScript가로드되었는지 확인하십시오. 그렇다면 제출 양식을 다음 옵션 세트를 채우기 위해 Ajax 뒤에 Ajax가있는 일반 HTML로 교체하십시오. 이렇게하면 페이지가 JavaScript 일 때 페이지를 새로 고칠 필요가 없습니다. 하다 부하이지만 JavaScript 인 경우에도 여전히 작동합니다. 그렇지 않습니다 짐. 그냥 생각.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top