ajaxの3階層連携メニューバーの実装方法-jsチュートリアル-php.cn

ajaxの3階層連携メニューバーの実装方法

php中世界最好的语言

リリース： 2018-03-31 16:13:42

オリジナル

1765 人が閲覧しました

今回はajaxの3階層連携メニューバーの実装方法を紹介します。 ajaxの3階層連携メニューバーを実装する際の注意点を実際に見てみましょう。

この記事の例では、ajax 3 レベル連携表示の具体的なコードを共有します

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。 chuli.php

// 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 中国語 Web サイトの他の関連記事を参照してください。