Ajax의 3단계 연계 메뉴바 구현 방법-JS 튜토리얼-php.cn

Ajax의 3단계 연계 메뉴바 구현 방법

php中世界最好的语言

풀어 주다： 2018-03-31 16:13:42

원래의

1766명이 탐색했습니다.

이번에는 ajax의 3단계 연결 메뉴바 구현 방법을 알려드리겠습니다. ajax 3단계 연결 메뉴바 구현 시 주의사항은 무엇인가요?

본 글의 예시는 참고용으로 ajax 3단계 연계 표시의 구체적인 코드를 공유합니다.

1. .chuli.php

<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
<title>无标题文档</title>
</head>
<body>
<h1>三级联动</h1>
<p id="sanji"></p>
</body>
</html>

로그인 후 복사

// JavaScript Document
$(document).ready(function(e) {
 //找到ID=SANJI的p，造三个下拉扔进去
 $("#sanji").html("<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>");
 
 //加载省的数据
 LoadSheng();
 //加载市的数据
 LoadShi();
 //加载区的数据
 LoadQu();
 
 //给省的下拉加点击事件
 $("#sheng").click(function(){
   //重新加载市
   LoadShi();
   //重新加载区
   LoadQu();
  })
 //给市的下拉加点击事件
 $("#shi").click(function(){
   //重新加载区
   LoadQu();
  })
 
});
//加载省份的方法
function LoadSheng()
{
 //省的父级代号
 var pcode = "0001";
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   var hang = data.trim().split("|");
   var str = "";
   for(var i=0;i<hang.length;i++)
   {
    var lie = hang[i].split("^");
    str = str+"<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
   }
   $("#sheng").html(str);
  }
 });
}
//加载市的方法
function LoadShi()
{
 //找市的父级代号
 var pcode = $("#sheng").val();
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   var hang = data.trim().split("|");
   var str = "";
   for(var i=0;i<hang.length;i++)
   {
    var lie = hang[i].split("^");
    str = str+"<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
   }
   $("#shi").html(str);
  }
 });
}
//加载区的方法
function LoadQu()
{
 //找区的父级代号
 var pcode = $("#shi").val();
 $.ajax({
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   var hang = data.trim().split("|");
   var str = "";
   for(var i=0;i<hang.length;i++)
   {
    var lie = hang[i].split("^");
    str = str+"<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
   }
   $("#qu").html(str);
  }
 });
}

로그인 후 복사

에서 참조한 캡슐화된 클래스에서

string

을 반환하는 방법은 이 기사의 사례를 읽은 후 해당 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서! 추천 자료:

브라우저가 Ajax 요청을 기억하고 브라우저를 앞뒤로 제어하는 방법

AJAX는 새로 고침 없이 입력된 사용자 이름을 감지합니다

위 내용은 Ajax의 3단계 연계 메뉴바 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!