この記事では主に、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='sheng'></select><select id='shi'></select><select id='qu'></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='"+lie[0]+"'>"+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='"+lie[0]+"'>"+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='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#qu").html(str); } }); }
以上は、皆さんのためにまとめたものです。
関連記事:
ajaxでデータ読み込み機能を実装React+ajax+javaで画像アップロードとプレビュー機能を実装(グラフィック)チュートリアル)
以上がAjax 3 レベルのリンケージ実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。