ajax 3 레벨 연동 드 롭 다운 메뉴 효과

ajax 는 3 급 연동 을 쓰 고 파일 류 를 먼저 쓰 세 요.나중에 사용 할 때 직접 호출 하면 됩 니 다.
시계 한 장 을 찾 으 러 왔 습 니 다.

실현:
중국 지역 의 3 급 연동:성,시,구;
그림:

생각 을 말 하 다.
(1)사용자 가 성 을 선택 할 때 이벤트 가 발생 합 니 다.현재 성의 id 를 ajax 를 통 해 요청 을 서버 프로그램 에 전달 합 니 다.
(2)예 를 들 어 중국 지역 을 취하 면 중국 은 0001 이 고 자체 번 호 는 0001 인 것 이 바로 중국 지역 이다.
베 이 징 의 번 호 는 11 이 고 자 번 호 는 11 인 것 이 바로 베 이 징 시의 시내 이다.
즉,주 번호 에 따라 하위 번 호 를 조회 하 는 것 이다.
(3)서버 는 클 라 이언 트 의 요청 에 따라 데이터 베 이 스 를 조회 하고 일정한 형식 으로 클 라 이언 트 에 게 되 돌려 준다.
페이지 를 표시 하 는 것 은 매우 간단 합 니 다.div 하나만 있 으 면 js 와 jquery 파일 을 도입 하면 됩 니 다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>     </title>
 <script src="jquery-1.11.2.min.js"></script>
 <script src="sanji.js"></script>
</head>
<body>
<h1>    </h1>
<div id="sanji"></div>
</body>
</html>

드 롭 다운 상자 select 세 개 와 id 쓰기 방법 이 필요 합 니 다.
먼저 세 개의 드 롭 다운 상자 에 id 를 붙 이 고 세 가지 방법 을 실행 합 니 다.


$(document).ready(function(e){
 //      
 //      
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
 //    

 FillSheng();
 //   
 FillShi();
 //   
 FillQu();
}

다음은 방법 쓰기;
세 개의 메뉴 가 연결 되 어 있 습 니 다.즉,성에 따라 다른 옵션 이 있 을 수 있 습 니 다.
여 기 는 클릭()으로 이 벤트 를 클릭 하지 마 세 요.상태 변경 시 실행 할 이벤트 change()
(1)성에 변화 가 생 겼 을 때:


 //       
 $("#sheng").change(function(){
  FillShi();

  FillQu();
 })

시내
(2)시내 에 변화 가 발생 하면:


//      
 $("#shi").change(function(){
  FillQu();
 })
});

구 현 에 변화 가 발생 하 다.
이 논 리 는 흠 이 없다.
그리고 성의 정 보 를 굵게 불 러 오고 ajax 의 옮 겨 다 니 기 가 끝 날 때 값 을 시의 드 롭 다운 메뉴 에 기록 합 니 다.


//      
function FillSheng()
{
 //      
 //     
 var pcode = "0001";
 //         
 $.ajax({
  async:false,
  url:"cl.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"JSON",
  success:function(data)
{
 var str = "";
 for(var sj in data)
 {

  str = str+"<option value = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
 }
 $("#sheng").html(str);
}
 });
}

//   
function FillShi()
{
 //      
 //     
 var pcode = $("#sheng").val();
 //         
 $.ajax({
  async:false,
  //    
  url:"cl.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"JSON",
 success:function(data)
{
 var str = "";
 for(var sj in data)
 {

  str = str+"<option value = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
 }
 $("#shi").html(str);
}
});
}
//   
function FillQu()
{
 //      
 //     
 var pcode = $("#shi").val();
 //         
 $.ajax({

  url:"cl.php",
  data:{pcode:pcode},
 type:"POST",
  dataType:"JSON",
 success:function(data)
{
 var str = "";
 for(var sj in data)
 {

  str = str+"<option value = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
 }
 $("#qu").html(str);
}
});
}

여기 포맷 은 JSON 씨 가 다"TEXT"를 썼 었 거 든 요.
JSON
JSON 은 전달 대상 의 문법 으로 대상 은 name/value 쌍,배열 과 다른 대상 일 수 있 습 니 다.
우리 가 사용 하 는 것 은 배열 입 니 다.그러면 우 리 는 배열 을 옮 겨 다 니 며 모든 데 이 터 를 찾 아야 합 니 다.js 에서 배열 을 옮 겨 다 니 는 데 사용 하 는 것 은?
for(var sj in data)
{
}
배열 을 옮 겨 다 니 러 왔 습 니 다.격식
여기에 위 에서 말 한 그 파일 패키지 클래스 를 쓰 고 우리 가 이전에 데이터 베 이 스 를 연 결 했 던 클래스 를 찾 습 니 다.
이 단락 을 더 하면:


public function jsonQuery($sql,$type=1)
 {
  $db = new mysqli($this->host,$this->zhang,$this->mi,$this->dbname);
  $r = $db->query($sql);
  if($type == "1")
  {
   $arr = $r->fetch_all(MYSQLI_ASSOC);


   return json_encode($arr);
//      
  }
  else
  {
   return $r;
  }
 }
}

응,맞 아.
처리 페이지:
마지막 으로 처리 페이지:


<?php
$pcode = $_POST["pcode"];
include ("db.class.php");
$db = new db();

$sql = "select * from chinastates where ParentAreaCode = '{$pcode}'";
echo $db->jsonQuery($sql);

데이터베이스 연결,대상 호출 클래스,sql 문 구 를 쓰 고 바로 돌아 오 면 오 크!!
이렇게 짧 아!
효과 그림:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Javascript Ajax에 대한 간단한 연습

저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ajax 3 레벨 연동 드 롭 다운 메뉴 효과

좋은 웹페이지 즐겨찾기