本文實例講述了PHP+ajax實現(xiàn)二級聯(lián)動菜單功能。分享給大家供大家參考，具體如下：
如何實現(xiàn)二級聯(lián)動
工作原理
二級聯(lián)動在開發(fā)中是比較常見的一個技術點，它主要運用了JS的局部刷新技術ajax,不同于一般頁面全局刷新，它只會刷新我們需要改變值的地方，我們首先看下它的工作流程。
- 第一步：我們會向后臺發(fā)送一個請求
- 第二步：后臺接受請求后，會返回給我們一個值
- 第三步：將值用JS呈現(xiàn)在頁面中
HTML代碼
html>
head>
title>www.jb51.net 二級聯(lián)動/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(){
//初始化數(shù)據(jù)
var url = 'address.php'; //后臺地址
$("#address").change(function(){ //監(jiān)聽下拉列表的change事件
var address = $(this).val(); //獲取下拉列表選中的值
//發(fā)送一個post請求
$.ajax({
type:'post',
url:url,
data:{key:address},
dataType:'json',
success:function(data){ //請求成功回調函數(shù)
var status = data.status; //獲取返回值
var address = data.data;
if(status == 200){ //判斷狀態(tài)碼，200為成功
var option = '';
for(var i=0;iaddress.length;i++){ //循環(huán)獲取返回值，并組裝成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])){ //有值，組裝數(shù)據(jù)
$result['status'] = 200;
$result['data'] = $address[$key];
}else{ //無值，返回狀態(tài)碼220
$result['status'] = 220;
}
echo json_encode($result); //返回JSON數(shù)據(jù)
?>
運行效果：
其實三級聯(lián)動和二級聯(lián)動的原理都是一樣的，只是在其基礎上在重復一次而已
更多關于PHP相關內容感興趣的讀者可查看本站專題：《PHP+ajax技巧與應用小結》、《PHP網(wǎng)絡編程技巧總結》、《PHP基本語法入門教程》、《php面向對象程序設計入門教程》、《php字符串(string)用法總結》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家PHP程序設計有所幫助。
您可能感興趣的文章:- ajax三級聯(lián)動下拉菜單效果
- AJAX省市區(qū)三級聯(lián)動下拉菜單(java版)
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實現(xiàn)2級聯(lián)動下拉菜單
- ajax讀取數(shù)據(jù)庫內容實現(xiàn)二級聯(lián)動下拉選擇菜單示例
- Ajax二級聯(lián)動菜單實現(xiàn)原理及代碼
- 基于asp+ajax和數(shù)據(jù)庫驅動的二級聯(lián)動菜單
- 一個強健 實用的asp+ajax二級聯(lián)動菜單(有演示和附源程序打包下載)
- 落伍首發(fā) php+mysql 采用ajax技術的 省 市 地 3級聯(lián)動無刷新菜單 源碼
- 琥珀無限級分類聯(lián)動菜單AJAX版
- Ajax實現(xiàn)二級聯(lián)動菜單
