Jquery로 구현했습니다. 원래 코드는 IE만 지원합니다. 여기서는 세 가지 버전의 구현이 있습니다.
첫 번째는 XML을 읽어서 빌드한 것입니다. IE/firefox는 지원하지만 관심이 있는 경우 XML 읽기 부분을 AJAX로 변경하면 크롬 지원에는 문제가 없습니다.
두 번째는 Json 데이터 형식을 사용하여 구축되었으며 개선을 위한 두 번째 시도입니다.
세 번째는 데이터가 JS 파일로 분리되어 있다는 점만 제외하면 실제로 두 번째와 동일합니다. 내 코드에는 페이지에서 직접 Json 지방 및 도시 데이터를 생성하는 ASP 파일이 있습니다. ASP 파일을 호출하면 속도가 매우 느려집니다. JS 파일을 생성한 후 직접 호출하는 것이 훨씬 빠르며, 이 부분의 데이터는 일반적으로 변경되지 않습니다.
플러그인 예시를 추가했습니다. 사실 플러그인이 아니라 그냥 플러그인으로 작성하면 어떨까요?
div, 테이블, td 등과 같은 페이지 요소로 제한되지 않고 페이지의 어느 곳에나 선택 항목을 배치할 수 있습니다.
매개변수는 다음과 유사합니다. s1/s2/s3은 선택 ID를 구성하고, v1/v2/v3은 기본값입니다. 설정하지 않으려면 null로 설정하거나 설정하지 마세요. 직접 설정하지 마세요.
매개변수 구성은 다음과 같습니다. select의 3가지 ID와 기본값을 구성하면 됩니다. 기본값이 없으면 null을 입력하세요.
var defaults = { s1:'Select1', s2:'Select2', s3:'Select3', v1:null, v2:null, v3:null };
이렇습니다. 네 번째 예, 디렉토리의 php 파일은 사용을 위한 참조로 사용되는 서버측 데이터의 생성된 데모입니다.
데이터 형식 정의는 다음과 유사합니다.
var threeSelectData={ "省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}}, "beijing":{val:"01",items:{ "bj-01":{val:"0101",items:{ "bj-01-01":"010101" }}, "bj-02":{val:"0102",items:{ "bj-02-01":"010201", "bj-02-02":"010202" }} }}, "shanxi":{val:"02",items:{}}, "guangzhou":{val:"02",items:{}} };
코드 예: