> php教程 > PHP开发 > 본문

jquery+json 범용 3단계 연결 드롭다운 목록

黄舟
풀어 주다: 2016-12-12 16:39:34
원래의
1171명이 탐색했습니다.

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:{}} 
};
로그인 후 복사

코드 예:

 
 
 
 
 
 
로그인 후 복사


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿