jQuery JSON_jquery를 기반으로 한 지방자치단체 2차, 3차 연계 효과-JS 튜토리얼-php.cn

jQuery JSON_jquery를 기반으로 한 지방자치단체 2차, 3차 연계 효과

WBOY

풀어 주다： 2016-05-16 15:56:34

원래의

1005명이 탐색했습니다.

시/도 연계 드롭다운 효과는 WEB, 특히 일부 회원정보시스템과 전자상거래 사이트에서 널리 사용되고 있습니다. 개발자는 일반적으로 새로 고침이 필요 없는 드롭다운 링크를 구현하기 위해 Ajax를 사용합니다. 이 글에서는 jQuery 플러그인을 사용하여 JSON 데이터를 읽어 새로 고침 없이 지방 및 시의 동적 드롭다운의 2차(3차) 레벨 연결 효과를 얻는 방법을 설명합니다.

HTML

먼저 jquery 라이브러리와 cityselect 플러그인을 헤드에 로드하세요.

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cityselect.js"></script>

로그인 후 복사

다음으로 #city에 3개의 선택 항목을 배치하고 3개의 선택 항목의 클래스 속성을 prov, city 및 dist로 설정합니다. 이는 각각 지방, 시, 구(군)의 3개 드롭다운 상자를 나타냅니다. . 지방과 도시의 두 번째 수준 연결만 원하는 경우 세 번째 dist select를 제거하면 됩니다.

 
<div id="city"> 
   <select class="prov"></select> 
  <select class="city" disabled="disabled"></select> 
  <select class="dist" disabled="disabled"></select> 
</div>

로그인 후 복사

jQuery

cityselect 플러그인을 호출하는 방법은 매우 간단합니다. 직접 호출하면 됩니다.

 
$("#city").citySelect();

로그인 후 복사

맞춤 매개변수 호출로 기본 주/시를 설정합니다.

 
$("#city").citySelect({ 
  url:"js/city.min.js", 
  prov:"湖南", //省份 
  city:"长沙", //城市 
  dist:"岳麓区", //区县 
  nodata:"none" //当子集无数据时，隐藏select 
});

로그인 후 복사

물론, 드롭다운 목록 옵션 데이터를 확장하고 사용자 정의할 수도 있습니다. 필요에 따라 드롭다운 콘텐츠를 설정할 수도 있습니다. 데이터 형식은 JSON 형식이어야 합니다.

 
$("#city").citySelect({ 
  url:{"citylist":[ 
    {"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]}, 
    {"n":"JAVASCIPT"}]}, 
    {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]}, 
    {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, 
  ]}, 
  prov:"", 
  city:"", 
  dist:"", 
  nodata:"none" 
});

로그인 후 복사

또한 PHP와 같은 백엔드 언어를 사용하여 데이터베이스의 데이터를 JSON 형식으로 변환한 다음 url 매개변수를 사용하여 백엔드 주소를 가리켜 새로 고침 없는 연결 효과를 얻을 수 있습니다.

 
$("#city").citySelect({ 
  url:"data.php" 
});

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.