站長(zhǎng)資訊網(wǎng)
ajax php實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單的方法：1、寫個(gè)頁(yè)面引用一下“sanjiliandong_fengzhuang.js”；2、實(shí)現(xiàn)下拉菜單的邏輯；3、對(duì)下拉菜單項(xiàng)加事件；4、通過AJAX進(jìn)行遍歷數(shù)據(jù)庫(kù)；5、創(chuàng)建數(shù)據(jù)的處理頁(yè)面。
本文操作環(huán)境：windows7系統(tǒng)、PHP7.1版、Dell G3電腦。
ajax php怎么實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單?
php+ajax的三級(jí)聯(lián)動(dòng)下拉菜單
封裝一個(gè)三級(jí)聯(lián)動(dòng)，就可以在任何頁(yè)面進(jìn)行引用了
先寫個(gè)頁(yè)面引用一下這個(gè)js
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三級(jí)聯(lián)動(dòng)</title> <script src="../jquery-1.11.2.min.js"></script> //引入的jQuery的包 <script src="sanjiliandong_fengzhuang.js"></script> //引入下面的寫的三級(jí)聯(lián)動(dòng)的封裝js </head> <body> <p id="sanji"> //引用的三級(jí)聯(lián)動(dòng)js </p> </body>
1.首先是頁(yè)面加載完成后才運(yùn)行，所以要在開頭寫上
$(document).ready(function(e) { //寫入方法 });
可以先將省、市、區(qū)的方法名寫出
//填充省的方法 function FillSheng() { //方法的功能 } //填充市的方法 function FillShi() { //方法的功能 } //填充區(qū)的方法 function FillQu() { //方法的功能 }
2.先考慮下下拉菜單的邏輯，先不著急寫功能：頁(yè)面加載完成后是要三個(gè)下拉菜單，菜單的元素是select，為每一個(gè)菜單起個(gè)名字，利于寫方法時(shí)使用
var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; //三個(gè)下拉菜單項(xiàng) $("#sanji").html(str); //將菜單交個(gè)要使用這個(gè)封裝的頁(yè)面的p中
3.在執(zhí)行時(shí)是依次顯示省、市、區(qū)，然后可以將方法寫入（1中）的注釋處
FillSheng(); //填充省的方法 FillShi(); //填充市的方法 FillQu(); //填充區(qū)的方法
4.三個(gè)菜單項(xiàng)是聯(lián)動(dòng)的，也就是根據(jù)省的不同可以有不同的選項(xiàng)
可以對(duì)下拉菜單項(xiàng)加事件，這里不用單擊事件，可以用改變事件change（）
（1）點(diǎn)擊省，市和區(qū)都改變顯示
$("#sheng").change(function(){ //改變省，下面的市和區(qū)顯示 FillShi(); FillQu(); })
（2）點(diǎn)擊市，就區(qū)改變顯示
$("#shi").change(function(){ //這里就是改變區(qū)的 FillQu(); })
這樣，對(duì)于邏輯也就是上面的解釋，下面就是對(duì)每個(gè)方法寫功能了
5.填充省的方法
這就要根據(jù)表中的信息了，我的表中是這樣的：
不難看出規(guī)律，地區(qū)的代號(hào)和父級(jí)代號(hào)能看出，通過11—父級(jí)的11，也就是通過省能找到相應(yīng)的市；然后通過1101—父級(jí)的1101，也就是通過市能找到相應(yīng)的區(qū)
省中只有一個(gè)中國(guó)中的省，那么直接定義一個(gè)代號(hào)是“0001”，然后通過AJAX進(jìn)行遍歷數(shù)據(jù)庫(kù)找出屬于中國(guó)的省
function FillSheng() { var pcode = "0001"; //定義的代號(hào)是0001 $.ajax({ async:false, //默認(rèn)是同步的，false是異步進(jìn)行 url:"sanjiliandong_chuli.php", //處理數(shù)據(jù)的處理頁(yè)面 data:{pcode:pcode}, type:"POST", //數(shù)據(jù)傳輸方式 dataType:"TEXT", success: function(data){ //處理頁(yè)面結(jié)束后執(zhí)行的代碼 } }); }
數(shù)據(jù)的處理頁(yè)面：
<?php include("DBDA.class.php"); //調(diào)用封裝好的數(shù)據(jù)庫(kù) $db = new DBDA(); //造新對(duì)象 $pcode = $_POST["pcode"]; //取出傳過來的值 $sql = "select * from chinastates where parentareacode='{$pcode}'"; //找出父級(jí)代號(hào)等于傳過來的值得全部信息 echo $db->StrQuery($sql); //執(zhí)行代碼，轉(zhuǎn)換為字符串類型：封裝的轉(zhuǎn)變方式在上一篇隨筆中寫過一遍
處理頁(yè)面執(zhí)行結(jié)束之后，在ajax方法中的成功后的方法中寫入結(jié)束之后的語句
因?yàn)槭亲址?，所以要拆分，行列都要拆封，并且將結(jié)果給省的下拉菜單中
var hang = data.split("|"); //拆分行，根據(jù)“|” var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); //拆分列，根據(jù)“^” str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; //顯示索引是1的也就是名稱那一列，菜單項(xiàng)的值是表中的地區(qū)代號(hào)那一列 } $("#sheng").html(str); //結(jié)果放入省的下拉菜單
執(zhí)行引用js的頁(yè)面走起效果： 
6.填充市和區(qū)的方法
它的編寫和省差不多，處理頁(yè)面也是一樣的，不同的就是傳輸?shù)闹?/p>
//填充市的方法 function FillShi() { //方法的功能，除了這兩項(xiàng)不一樣，其他的都一樣 }
在市菜單中定義一個(gè)填充省的值，最后遍歷結(jié)束時(shí)，將值寫入市的下拉菜單中
var pcode = $("#sheng").val(); //將省的值在市中
在寫完ajax的遍歷結(jié)束時(shí)，值寫入市的下拉菜單
$("#shi").html(str);
//填充區(qū)的方法 function FillQu() { //方法的功能，除了這兩項(xiàng)，其他的都沒變過 }
區(qū)就是定義一個(gè)填充的市的值，最后遍歷時(shí)，將值寫入?yún)^(qū)的下拉菜單中
var pcode = $("#shi").val(); //將市值定義在區(qū)中
在寫完ajax的遍歷結(jié)束時(shí)，值寫入?yún)^(qū)的下拉菜單
$("#qu").html(str);
最后的效果就是改變一個(gè)下拉菜單，市和區(qū)的下拉菜單都變
推薦學(xué)習(xí)：《PHP視頻教程》
