PHP+JQ+html三級聯動
阿新 • • 發佈：2020-12-11
jq+html頁面程式碼:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>三級聯動</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div id="ssq"></div> </body> <script> // 當頁面內容都載入完才執行 $(document).ready(function (e) { // 載入三個下拉列表 $("#ssq").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); // 載入顯示資料 // 1.載入省份 FillSheng(); // 2.載入市 FillShi(); // 3.載入區 FillQu(); // 當省份選中變化，重新載入市和區 $("#sheng").change(function () { // 當元素的值發生改變時，會發生 change 事件,該事件僅適用於文字域（text field），以及 textarea 和 select 元素。 // 載入市 FillShi(); // 載入區 FillQu(); }); // 當市選中變化，重新載入區 $("#shi").change(function () { //載入區 FillQu(); }) }); // 載入省份資訊 function FillSheng() { //取父級代號 var pcode = "0"; // 根據父級代號查資料 $.ajax({ // 取消非同步，也就是必須完成上面才能走下面 async: false, url: "load", data: {pcode: pcode}, type: "POST", dataType: "JSON", success: function (data) { var str = ""; // 遍歷陣列，把它放入sj for (var sj in data) { //<option value="11">北京</option> str = str + "<option value='" + data[sj].id + "'>" + data[sj].name + "</option>"; } $("#sheng").html(str); } }); } // 載入市資訊 function FillShi() { // 取父級代號 var pcode = $("#sheng").val(); // 根據父級代號查資料 $.ajax({ // 取消非同步，也就是必須完成上面才能走下面 async: false, url: "load", data: {pcode: pcode}, type: "POST", dataType: "JSON", success: function (data) { var str = ""; // 遍歷陣列，把它放入sj for (var sj in data) { //<option value="11">北京</option> str = str + "<option value='" + data[sj].id + "'>" + data[sj].name + "</option>"; } $("#shi").html(str); } }); } // 載入區資訊 function FillQu() { //取父級代號 var pcode = $("#shi").val(); // 根據父級代號查資料 $.ajax({ // 不需要取消非同步 url: "load", data: {pcode: pcode}, type: "POST", dataType: "JSON", success: function (data) { var str = ""; // 遍歷陣列，把它放入sj for (var sj in data) { //<option value="11">北京</option> str = str + "<option value='" + data[sj].id + "'>" + data[sj].name + "</option>"; } $("#qu").html(str); } }); } </script> </html>
php程式碼:
public function load() { $pcode = $_POST["pcode"]; $sql_area = mysqli_connect('host', 'user', 'password', 'database'); // 檢測連線 if (!$sql_area) { //連線失敗 exit('<h1>資料庫連線失敗</h1>'); } //基於剛建立的連線物件進行一次查詢操作 $area_data = mysqli_query($sql_area, "SELECT `id`,`pid`,`name`,`level` FROM `sso_area` WHERE pid='{$pcode}'"); if (!$area_data) { exit('<h1>查詢失敗</h1>'); } $area_data_arr = []; //遍歷結果集 while ($row = mysqli_fetch_assoc($area_data)) { //列印結果集 array_push($area_data_arr, $row); } //釋放結果集 mysqli_free_result($area_data); //斷開與資料庫連線 mysqli_close($sql_area); echo json_encode($area_data_arr); die; }
資料庫:
CREATE TABLE `sso_area` ( `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'ID', `pid` int(10) DEFAULT NULL COMMENT '父id', `name` varchar(100) DEFAULT NULL COMMENT '名稱', `level` tinyint(4) DEFAULT NULL COMMENT '層級 0 1 2 省市區縣', PRIMARY KEY (`id`) USING BTREE, KEY `pid` (`pid`) USING BTREE ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='地區表';
