suchen

Heim >Web-Frontend >js-Tutorial >Ajax-Drei-Ebenen-Verknüpfungsimplementierungscode_AJAX bezogen

Ajax-Drei-Ebenen-Verknüpfungsimplementierungscode_AJAX bezogen

微波
微波Original
2017-06-28 13:58:061110Durchsuche

In diesem Artikel wird hauptsächlich der Implementierungscode der Ajax-Drei-Ebenen-Verknüpfung im Detail vorgestellt, der einen gewissen Referenzwert hat.

Das Beispiel in diesem Artikel teilt die Ajax-Drei-Ebenen-Verknüpfung mit allen Verknüpfungscode. Der spezifische Code für die Verknüpfungsanzeige ist wie folgt:

1 .sanji.js

<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>

3. Die Methode 

// 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);
  }
 });
}
in der gekapselten Klasse, auf die chuli.php

<?php
//给一个父级代号，返回该父级代号下所有的子地区
require "DBDA.class.php";
$db=new DBDA();
$pcode=$_POST["pcode"];


$sql="select areacode,areaname from chinastates where parentareacode=&#39;{$pcode}&#39;";
echo $db->StrQuery($sql);
verweist, gibt einen

String zurück

Das obige ist der detaillierte Inhalt vonAjax-Drei-Ebenen-Verknüpfungsimplementierungscode_AJAX bezogen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Über die Verwendung von Ajax, Ajax-Datenverarbeitung_AJAX bezogenNächster Artikel：Über die Verwendung von Ajax, Ajax-Datenverarbeitung_AJAX bezogen

In Verbindung stehende Artikel

Mehr sehen