국가 및 주 선택 필드를 점진적으로 향상시킬 수 있습니까?</p> <pre><code><select name="country"> <option>USA</option> <option>France</option> </select> <select name="state"> <option></option> </select> </code></pre> <p>I을 :

Question

은 내가이 개 선택 필드, 국가 및 상태이있는 경우

, 나는 지금처럼 코드 것이다 ... 어떤 웹 사이트가 제대로 이렇게 보지 못했다 그런 다음 국가 선택에 따라 AJAX를 사용하여 국가 필드를 채 웁니다.

그러나 점차적으로 향상된 상태입니다. Javascript를 사용하지 않으면 어떻게 될까요? 그리고 이전의 예제가 최선의 방법이 아니라면 어떻게 강화해야 하는가?

Answer 1

내 추천 국가 드롭 다운 목록 아래/아래에 제출 버튼이 있습니다. 제출하면 서버는 선택한 국가의 상태를 채우고 응답을 되돌려 보냅니다.

이제 자바 스크립트 페이지로드시이 버튼을 숨기고 변경 핸들러를 국가 드롭 다운에 첨부하고 상태를 반환하는 AJAX 호출을 작성하십시오.

그래서 자바 스크립트가 사용 중지되면 버튼이 상태를 검색합니다. 가능하다면 AJAX 호출도 똑같이 할 것입니다.

Answer 2

하나의 솔루션은 두 선택을 함께 결합하는 것일 수 있습니다. 물론

<select name="countryAndState"> 
    <option>USA - Alabama</option> 
    <option>USA - Alaska</option> 
    ... 
    <option>France - Alsace</option> 
    <option>France - Aquitaine</option> 
</select> 

이상

<select name="countryAndState"> 
    <optgroup label="USA"> 
     <option>Alabama</option> 
     ... 
    </optgroup> 
    <optgroup label="France"> 
     <option>Alsace</option> 
     ... 
    </optgroup> 
</select> 

같이, 적어도 두 번째 형태는 옵션 value의이 고유한지 확인해야합니다. optgroup element은 select 옵션을 트리 순서로 계층 적으로 그룹화하는 데 권장되는 방법입니다. 즉, 자바 스크립트를 개선하면 DOM에서 트리 구조를 추출 할 수도 있습니다.

다른 해결책은 상태 필드 서버를 채우는 것입니다. 즉, 양식을 두 단계로 나눠서 처음으로 국가를 선택한 다음 상태를 선택합니다. 선택한 국가를 저장하기 위해 쿠키 등으로 수행 할 수 있습니다. country의 제출 된 값이 저장된 값과 다를 때마다 새로운 (선택되지 않은) 상태 select 요소를 출력해야합니다.