# 使用PHP建立五層下拉式選單並動態連結資料庫,並使用datatables套件,並同一頁面顯示,並搭配註解說明
###### tags: `AUO` `前端`
以下是使用PHP建立五層下拉式選單並動態連結資料庫、使用datatables套件並同一頁面顯示的範例程式碼，並搭配註解說明：
```
<!DOCTYPE html>
<html>
<head>
<title>Five-level Dropdown using PHP and DataTables</title>
<!-- 引入jQuery和DataTables CSS和JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"></script>
</head>
<body>
<?php
// 資料庫連線設定
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
// 建立資料庫連線
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連線是否成功
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 取得第一層資料
$sql = "SELECT DISTINCT category FROM products";
$result = $conn->query($sql);
// 印出第一層下拉式選單
echo "<select id='category' name='category'>";
echo "<option value=''>--請選擇--</option>";
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['category']."'>".$row['category']."</option>";
}
echo "</select>";
// 釋放第一層資料的資源
$result->free();
// 印出第二層下拉式選單的空框
echo "<select id='subcategory' name='subcategory'></select>";
// 印出第三層下拉式選單的空框
echo "<select id='subsubcategory' name='subsubcategory'></select>";
// 印出第四層下拉式選單的空框
echo "<select id='subsubsubcategory' name='subsubsubcategory'></select>";
// 印出第五層下拉式選單的空框
echo "<select id='subsubsubsubcategory' name='subsubsubsubcategory'></select>";
// 釋放資料庫連線資源
$conn->close();
?>
<!-- JavaScript區塊 -->
<script type="text/javascript">
$(document).ready(function() {
// 當第一層下拉式選單改變時觸發事件
$("#category").change(function() {
// 取得第一層下拉式選單的值
var category = $(this).val();
// 如果第一層下拉式選單沒有選擇值，就清空其他下拉式選單
if (category == "") {
$("#subcategory").html("");
$("#subsubcategory").html("");
$("#subsubsubcategory").html("");
$("#subsubsubsubcategory").html("");
} else {
// 如果第一層下拉式選單有選擇值，就用AJAX從後端取得第二層資料
$.ajax({
type: "POST",
url: "get_data.php",
data: {category: category, level: 2},
success: function(data) {
// 將第二層資料填入第二層下拉式選單
$("#subcategory").html(data);
// 清空其他下拉式選單
$("#subsubcategory").html("");
$("#subsubsubcategory").html("");
$("#subsubsubsubcategory").html("");
}
});
}
});
// 當第二層下拉式選單改變時觸發事件
$("#subcategory").change(function() {
// 取得第二層下拉式選單的值
var subcategory = $(this).val();
// 如果第二層下拉式選單沒有選擇值，就清空其他下拉式選單
if (subcategory == "") {
$("#subsubcategory").html("");
$("#subsubsubcategory").html("");
$("#subsubsubsubcategory").html("");
} else {
// 如果第二層下拉式選單有選擇值，就用AJAX從後端取得第三層資料
$.ajax({
type: "POST",
url: "get_data.php",
data: {category: subcategory, level: 3},
success: function(data) {
// 將第三層資料填入第三層下拉式選單
$("#subsubcategory").html(data);
// 清空其他下拉式選單
$("#subsubsubcategory").html("");
$("#subsubsubsubcategory").html("");
}
});
}
});
// 當第三層下拉式選單改變時觸發事件
$("#subsubcategory").change(function() {
// 取得第三層下拉式選單的值
var subsubcategory = $(this).val();
// 如果第三層下拉式選單沒有選擇值，就清空其他下拉式選單
if (subsubcategory == "") {
$("#subsubsubcategory").html("");
$("#subsubsubsubcategory").html("");
} else {
// 如果第三層下拉式選單有選擇值，就用AJAX從後端取得第四層資料
$.ajax({
type: "POST",
url: "get_data.php",
data: {category: subsubcategory, level: 4},
success: function(data) {
// 將第四層資料填入第四層下拉式選單
$("#subsubsubcategory").html(data);
// 清空其他下拉式選單
$("#subsubsubsubcategory").html("");
}
});
}
});
// 當第四層下拉式選單改變時觸發事件
$("#subsubsubcategory").change(function() {
// 取得第四層下拉式選單的值
var subsubsubcategory = $(this).val();
// 如果第四層下拉式選單沒有選擇值，就清空其他下拉式選單
if (subsubsubcategory == "") {
$("#subsubsubsubcategory").html("");
} else {
// 如果第四層下拉式選單有選擇值，就用AJAX從後端取得第五層資料
$.ajax({
type: "POST",
url: "get_data.php",
data: {category: subsubsubcategory, level: 5},
success: function(data) {
// 將第五層資料填入第五層下拉式選單
$("#subsubsubsubcategory").html(data);
}
});
}
});
// 當第五層下拉式選單改變時觸發事件
$("#subsubsubsubcategory").change(function() {
// 取得第五層下拉式選單的值
var subsubsubsubcategory = $(this).val();
// 如果第五層下拉式選單有選擇值，就用AJAX從後端取得相關資料並顯示於頁面上
if (subsubsubsubcategory != "") {
$.ajax({
type: "POST",
url: "get_data.php",
data: {category: subsubsubsubcategory, level: 6},
success: function(data) {
// 將資料填入datatable並顯示於頁面上
$("#datatable").html(data);
$('#datatable').DataTable();
}
});
}
});
});
</script>
</head>
<body>
<div>
<label>第一層:</label>
<select id="category">
<option value="">請選擇</option>
<!-- 第一層下拉式選單選項由後端動態產生 -->
<?php echo $categories; ?>
</select>
</div>
<div>
<label>第二層:</label>
<select id="subcategory">
<option value="">請選擇</option>
</select>
</div>
<div>
<label>第三層:</label>
<select id="subsubcategory">
<option value="">請選擇</option>
</select>
</div>
<div>
<label>第四層:</label>
<select id="subsubsubcategory">
<option value="">請選擇</option>
</select>
</div>
<div>
<label>第五層:</label>
<select id="subsubsubsubcategory">
<option value="">請選擇</option>
</select>
</div>
<div id="datatable"></div>
</body>
</html>
```
解釋：
以上程式碼建立了一個五層下拉式選單，並且使用AJAX技術來動態從資料庫取得資料，並用datatables套件來顯示表格。
首先，在HTML中建立五個下拉式選單，每個下拉式選單的id屬性分別為category、subcategory、subsubcategory、subsubsubcategory和subsubsubsubcategory。然後，在JavaScript中設定了一些事件處理器。
當第一層下拉式選單改變時，將觸發事件處理器。此事件處理器使用AJAX從後端的get_data.php檔案中取得第二層資料。get_data.php檔案會接收category和level兩個參數，category代表要查詢的資料類別，level代表要查詢的資料層級。此檔案會回傳一個JSON格式的資料，其中包含第二層資料的選項。然後，此事件處理器會將第二層資料填入第二層下拉式選單中。
接著，當第二層下拉式選單改變時，將觸發事件處理器。此事件處理器會使用AJAX從後端的get_data.php檔案中取得第三層資料。然後，此事件處理器會將第三層資料填入第三層下拉式選單中。
接著，當第三層下拉式選單改變時，將觸發事件處理器。此事件處理器會使用AJAX從後端的get_data.php檔案中取得第四層資料。然後，此事件處理器會將第四層資料填入第四層下拉式選單中。
接著，當第四層下拉式選單改變時，將觸發事件處理器。此事件處理器會使用AJAX從後端的get_data.php檔案中取得第五層資料。然後，此事件處理器會將第五層資料填入第五層下拉式選單中。
最後，當第五層下拉式選單改變時，將觸發事件處理器。此事件處理器會使用AJAX從後端的get_data.php檔案中取得相關資料，並將資料填入datatables中，並在頁面上
get_data.php檔案
以下是get_data.php檔案的程式碼，這個檔案會從資料庫中取得相關資料，並回傳一個JSON格式的資料，其中包含該層級資料的選項。
```
<?php
// 建立資料庫連線
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 取得從前端傳來的參數
$category = $_GET['category'];
$level = $_GET['level'];
// 根據不同的層級，從資料庫取得相關資料
if ($level == 1) {
$sql = "SELECT DISTINCT category FROM items ORDER BY category ASC";
} elseif ($level == 2) {
$subcategory = $_GET['subcategory'];
$sql = "SELECT DISTINCT subcategory FROM items WHERE category = '$subcategory' ORDER BY subcategory ASC";
} elseif ($level == 3) {
$subcategory = $_GET['subcategory'];
$subsubcategory = $_GET['subsubcategory'];
$sql = "SELECT DISTINCT subsubcategory FROM items WHERE category = '$subcategory' AND subcategory = '$subsubcategory' ORDER BY subsubcategory ASC";
} elseif ($level == 4) {
$subcategory = $_GET['subcategory'];
$subsubcategory = $_GET['subsubcategory'];
$subsubsubcategory = $_GET['subsubsubcategory'];
$sql = "SELECT DISTINCT subsubsubcategory FROM items WHERE category = '$subcategory' AND subcategory = '$subsubcategory' AND subsubcategory = '$subsubsubcategory' ORDER BY subsubsubcategory ASC";
} elseif ($level == 5) {
$subcategory = $_GET['subcategory'];
$subsubcategory = $_GET['subsubcategory'];
$subsubsubcategory = $_GET['subsubsubcategory'];
$subsubsubsubcategory = $_GET['subsubsubsubcategory'];
$sql = "SELECT * FROM items WHERE category = '$subcategory' AND subcategory = '$subsubcategory' AND subsubcategory = '$subsubsubcategory' AND subsubsubcategory = '$subsubsubsubcategory'";
}
$result = $conn->query($sql);
// 將查詢結果轉換成JSON格式，並回傳給前端
$data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
echo json_encode($data);
$conn->close();
?>
```
解釋：
以上程式碼是get_data.php檔案的程式碼。當AJAX從前端傳來的參數後，此檔案會根據不同的層級，從資料庫取得相關資料。然後，將查詢結果轉換成JSON格式，並回傳給前端。
首先，建立資料庫連線。接著，使用$_GET從前端取得傳來的參數$category和$level。
Sign in with Wallet
Connect another wallet