本文實例講述了PHP+ajax實現二級聯動菜單功能。分享給大家供大家參考，具體如下：
如何實現二級聯動
工作原理
二級聯動在開發中是比較常見的一個技術點，它主要運用了JS的局部刷新技術ajax,不同于一般頁面全局刷新，它只會刷新我們需要改變值的地方，我們首先看下它的工作流程。
- 第一步：我們會向后臺發送一個請求
- 第二步：后臺接受請求后，會返回給我們一個值
- 第三步：將值用JS呈現在頁面中
HTML代碼
html>
head>
title>www.jb51.net 二級聯動/title>
meta http-equiv="Content-Type" content="text/html;charset=utf8">
script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">/script>
style>
#area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}
.area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}
/style>
head>
body>
div id="area-box">
select class="area-select" id='address'>
option value="0">請選擇省份/option>
option value="1">四川/option>
option value="2">河北/option>
option value="3">湖南/option>
/select>
select class="area-select" id="city">
option>請選擇城市/option>
/select>
/div>
script>
$(function(){
//初始化數據
var url = 'address.php'; //后臺地址
$("#address").change(function(){ //監聽下拉列表的change事件
var address = $(this).val(); //獲取下拉列表選中的值
//發送一個post請求
$.ajax({
type:'post',
url:url,
data:{key:address},
dataType:'json',
success:function(data){ //請求成功回調函數
var status = data.status; //獲取返回值
var address = data.data;
if(status == 200){ //判斷狀態碼，200為成功
var option = '';
for(var i=0;iaddress.length;i++){ //循環獲取返回值，并組裝成html代碼
option +='option>'+address[i]+'/option>';
}
}else{
var option = 'option>請選擇城市/option>'; //默認值
}
$("#city").html(option); //js刷新第二個下拉框的值
},
});
});
});
/script>
/body>
PHP代碼
?php
$key = $_POST['key']; //獲取值
$address[1] = array('成都','綿陽','德陽');
$address[2] = array('石家莊','唐山','秦皇島');
$address[3] = array('長沙','株洲','湘潭');
if(!empty($address[$key])){ //有值，組裝數據
$result['status'] = 200;
$result['data'] = $address[$key];
}else{ //無值，返回狀態碼220
$result['status'] = 220;
}
echo json_encode($result); //返回JSON數據
?>
運行效果：
其實三級聯動和二級聯動的原理都是一樣的，只是在其基礎上在重復一次而已
更多關于PHP相關內容感興趣的讀者可查看本站專題：《PHP+ajax技巧與應用小結》、《PHP網絡編程技巧總結》、《PHP基本語法入門教程》、《php面向對象程序設計入門教程》、《php字符串(string)用法總結》、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》
希望本文所述對大家PHP程序設計有所幫助。
您可能感興趣的文章:- ajax三級聯動下拉菜單效果
- AJAX省市區三級聯動下拉菜單(java版)
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實現2級聯動下拉菜單
- ajax讀取數據庫內容實現二級聯動下拉選擇菜單示例
- Ajax二級聯動菜單實現原理及代碼
- 基于asp+ajax和數據庫驅動的二級聯動菜單
- 一個強健 實用的asp+ajax二級聯動菜單(有演示和附源程序打包下載)
- 落伍首發 php+mysql 采用ajax技術的 省 市 地 3級聯動無刷新菜單 源碼
- 琥珀無限級分類聯動菜單AJAX版
- Ajax實現二級聯動菜單
