jquery json 범용 3단계 연결 드롭다운 list_jquery
- WBOY원래의
- 2016-05-16 18:29:031286검색
작성자: shaoyun
이메일: shaoyun (at) yeah.net
날짜: 2010-03-10 02:03
블로그: http://shaoyun.cnblogs.com/
사용 Jquery 구현, 원본 코드는 IE만 지원합니다. 여기에서 변경했습니다. 내 코드에는 세 가지 버전의 구현이 있습니다.
첫 번째는 XML을 읽어 빌드되었으며 IE/firefox를 지원하고 Chrome에서는 지원하지 않습니다. 관심이 있으시면 XML 읽기 부분을 AJAX로 변경하면 크롬 지원이 문제가 되지 않습니다
두 번째는 Json 데이터 형식을 사용하여 구축되었으며 이는 두 번째 개선 시도입니다
세 번째는 실제로는 두 번째와 동일합니다. 하지만 데이터가 JS 파일로 분리되어 있습니다. 제 코드에는 데이터베이스를 호출하여 Json 지방 및 도시 데이터를 직접 호출하는 경우가 있습니다. JS 파일을 생성한 후에는 직접 호출하는 것이 훨씬 빠르며 일반적으로 이 부분의 데이터는 변경되지 않습니다.
업데이트 기록:
2010 -04-19 12:11:24
하나 더 추가했습니다. 플러그인의 예는 실제로는 플러그인이 아니라, 그냥 플러그인으로 작성하는 것이 어떨까요? 유연성을 고려하여
을 사용하면 div, 테이블, td 등과 같은 페이지 요소로 제한되지 않고 선택 항목을 페이지의 어느 곳에나 배치할 수 있습니다. 내부
매개변수는 다음과 유사합니다. /s3은 선택 ID를 구성하며, v1/v2/v3이 기본값입니다. 설정하지 않으려면 null로 설정하거나
매개변수 구성은 직접 설정하지 마세요. 아래와 같이 3개의 ID와 select의 기본값으로 충분합니다. 기본값이 없으면 null을 채워주세요
var defaults = {
s1:'Select1',
s2:'Select2',
s3:'Select3',
v1:null,
v2:null,
v3:null
};
이 디렉토리의 php 파일은 다음에서 생성된 데모입니다.
데이터 형식 정의는 다음과 유사합니다.
var threeSelectData= {
"province":{val:"",items:{"city":{val:"" ,items:{"지구 및 군":""}}}},
"beijing":{ val:"01",items:{
"bj-01":{val:"0101", 항목:{
"bj-01-01":"010101"
}},
"bj-02":{val:"0102",항목:{
"bj-02- 01":"010201",
"bj-02-02":"010202"
} }
}},
"shanxi":{val:"02",items:{} },
"guangzhou":{val:"02",items:{}}
} ;
코드 예: