Ajax 3 レベルのリンケージ実装コード-jsチュートリアル-php.cn

Ajax 3 レベルのリンケージ実装コード

亚连

リリース： 2018-05-22 14:32:40

オリジナル

1206 人が閲覧しました

この記事では主に、ajax 3 レベル連携の実装コードを詳しく紹介します。興味のある方は参考にしてください。

この記事の例では、ajax 3 レベル連携表示の具体的なコードを共有します。参考までに、具体的な内容は以下の通りです

1.test.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>

ログイン後にコピー

2. chuli.php

rreee

カプセル化されたクラスで文字列を返すメソッドを引用

// 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);
  }
 });
}

ログイン後にコピー

以上は、皆さんのためにまとめたものです。

ajaxでデータ読み込み機能を実装

ajax_Examplesの使い方、ajaxのデータ処理

React+ajax+javaで画像アップロードとプレビュー機能を実装(グラフィック)チュートリアル)

以上がAjax 3 レベルのリンケージ実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。