最簡單的三級聯動
阿新 • • 發佈：2018-11-16
最近研究了一下聯動原理，大多數聯動都是通過ajax實現的，其實就是通過ajax把頁面資料傳給後臺，在不重新整理頁面的情況下，改變下拉框的值。話不多說上程式碼講解：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試頁面</title> <script type="text/javascript" src="jquery-3.3.1.min.js"> </script> <script type="text/javascript"> var sheng; function fun(){ sheng=$("#sheng").val(); $.get("sheng.php",{sheng:sheng}, function (data){ $("#shi").html(data); }); } function fun2(){ var shi=$("#shi").val(); $.get("shi.php",{shi:shi,sheng:sheng}, function (data){ $("#qu").html(data); }); } </script> </head> <body> <select id="sheng" onchange="fun()"> <option value="">請選擇省份</option> <option value="1">山東</option> <option value="2">河北</option> </select> <select id="shi" onchange="fun2()"> <option>請選擇市</option> </select> <select id="qu"> <option value="">請選擇區</option> </select> </body> </html>
這是HTML和jQuery的部分，為了讓大家明白，我現在講解一下jQuery的$.get()方法。
他有三個引數：
第一個引數是傳送請求的URL地址，在這裡也就是sheng.php和shi.php；
第二個引數是需要傳的值，要用{}包裹起來，格式為{變數名：變數}，傳多個值{變數名1：變數值1，變數名2：變數值2}；
第三個引數是需要呼叫的方法，其中括號裡的 data 不是傳參，而是返回值，是URL地址執行後返回來的值。（注：val()是jQuery中來獲取value的函式，html()是jQuery中用來獲取元素值的函式）
下面來看一下PHP程式碼
<?php //這裡是sheng.php $sheng=$_GET['sheng']; if($sheng=="1"){ echo "<option>請選擇</option><option value='1'>淄博市</option><option value='2'>泰安市</option>"; } if($sheng=="2"){ echo "<option>請選擇</option><option value='1'>石家莊市</option><option value='2'>唐山市</option>"; }
<?php //這裡是shi.php $sheng=$_GET['sheng']; $shi=$_GET['shi']; if($sheng=="1"){ if($shi=="1"){ echo "<option>請選擇</option><option value='1'>張店區</option><option value='2'>桓臺區</option>"; } if($shi=="2"){ echo "<option>請選擇</option><option value='1'>泰山區</option><option value='2'>岱嶽區</option>"; } } if($sheng=="2"){ if($shi=="1"){ echo "<option>請選擇</option><option value='1'>長安區</option><option value='2'>橋東區</option>"; } if($shi=="2"){ echo "<option>請選擇</option><option value='1'>豐南區</option><option value='2'>豐潤區</option>"; } }
因為用的是get（）方法，所以是get接收。因為只是講解一下方法，所以在此我不在演示從資料庫中調取資料。值得注意的是，在PHP中只有echo出的資料，才會被jQuery中的get方法中的data所接收。
想要用post方法，只要把所有get替換即可正常執行。