ajaxphp如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單

這篇文章給大家介紹ajax php如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)建站堅(jiān)實(shí)的技術(shù)研發(fā)基礎(chǔ)贏得了行業(yè)內(nèi)的良好口碑，公司成立10年來(lái)，為成百上千企業(yè)提供過(guò)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、搜索引擎優(yōu)化技術(shù)、互聯(lián)網(wǎng)大數(shù)據(jù)整合營(yíng)銷(xiāo)服務(wù)，多年的技術(shù)服務(wù)成功經(jīng)驗(yàn)、眾多的客戶(hù)使我們能懂得更多，做得更好。"讓您的網(wǎng)站跑起來(lái)"是我們一直追求的目標(biāo)！

ajax php實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單的方法：1、寫(xiě)個(gè)頁(yè)面引用一下“sanjiliandong_fengzhuang.js”；2、實(shí)現(xiàn)下拉菜單的邏輯；3、對(duì)下拉菜單項(xiàng)加事件；4、通過(guò)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)行引用了

先寫(xiě)個(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>  //引入下面的寫(xiě)的三級(jí)聯(lián)動(dòng)的封裝js
</head>
    
<body>
    	<p id="sanji">
        　　　//引用的三級(jí)聯(lián)動(dòng)js
        </p>
</body>

1.首先是頁(yè)面加載完成后才運(yùn)行，所以要在開(kāi)頭寫(xiě)上

$(document).ready(function(e) {
   　　//寫(xiě)入方法
});

可以先將省、市、區(qū)的方法名寫(xiě)出

//填充省的方法
function FillSheng()
{
　　//方法的功能
}
//填充市的方法
function FillShi()
{
　　//方法的功能
}
//填充區(qū)的方法
function FillQu()
{
　　//方法的功能
}

2.先考慮下下拉菜單的邏輯，先不著急寫(xiě)功能：頁(yè)面加載完成后是要三個(gè)下拉菜單，菜單的元素是select，為每一個(gè)菜單起個(gè)名字，利于寫(xiě)方法時(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ū)，然后可以將方法寫(xiě)入（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ì)于邏輯也就是上面的解釋?zhuān)旅婢褪菍?duì)每個(gè)方法寫(xiě)功能了

5.填充省的方法

這就要根據(jù)表中的信息了，我的表中是這樣的：

ajax php如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單

不難看出規(guī)律，地區(qū)的代號(hào)和父級(jí)代號(hào)能看出，通過(guò)11---父級(jí)的11，也就是通過(guò)省能找到相應(yīng)的市；然后通過(guò)1101---父級(jí)的1101，也就是通過(guò)市能找到相應(yīng)的區(qū)

省中只有一個(gè)中國(guó)中的省，那么直接定義一個(gè)代號(hào)是“0001”，然后通過(guò)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"];  //取出傳過(guò)來(lái)的值

$sql = "select * from chinastates where parentareacode='{$pcode}'";  //找出父級(jí)代號(hào)等于傳過(guò)來(lái)的值得全部信息

echo $db->StrQuery($sql);  //執(zhí)行代碼，轉(zhuǎn)換為字符串類(lèi)型：封裝的轉(zhuǎn)變方式在上一篇隨筆中寫(xiě)過(guò)一遍

處理頁(yè)面執(zhí)行結(jié)束之后，在ajax方法中的成功后的方法中寫(xiě)入結(jié)束之后的語(yǔ)句

因?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的也就是名稱(chēng)那一列，菜單項(xiàng)的值是表中的地區(qū)代號(hào)那一列
}
$("#sheng").html(str); //結(jié)果放入省的下拉菜單

執(zhí)行引用js的頁(yè)面走起效果： ajax php如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單

6.填充市和區(qū)的方法

它的編寫(xiě)和省差不多，處理頁(yè)面也是一樣的，不同的就是傳輸?shù)闹?/p>

//填充市的方法
function FillShi()
{
　　//方法的功能，除了這兩項(xiàng)不一樣，其他的都一樣
}

在市菜單中定義一個(gè)填充省的值，最后遍歷結(jié)束時(shí)，將值寫(xiě)入市的下拉菜單中　

var pcode = $("#sheng").val();  //將省的值在市中

在寫(xiě)完ajax的遍歷結(jié)束時(shí)，值寫(xiě)入市的下拉菜單

$("#shi").html(str);

//填充區(qū)的方法
function FillQu()
{
　　//方法的功能，除了這兩項(xiàng)，其他的都沒(méi)變過(guò)
}

區(qū)就是定義一個(gè)填充的市的值，最后遍歷時(shí)，將值寫(xiě)入?yún)^(qū)的下拉菜單中

var pcode = $("#shi").val();   //將市值定義在區(qū)中

在寫(xiě)完ajax的遍歷結(jié)束時(shí)，值寫(xiě)入?yún)^(qū)的下拉菜單

$("#qu").html(str);

最后的效果就是改變一個(gè)下拉菜單，市和區(qū)的下拉菜單都變

ajax php如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單

關(guān)于ajax php如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

新聞名稱(chēng)：ajaxphp如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單
分享URL：http://jinyejixie.com/article4/jjhcie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、小程序開(kāi)發(fā)、全網(wǎng)營(yíng)銷(xiāo)推廣、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

ajaxphp如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單