本文介紹了如何使用PHP和Ajax來創建兩個聯動的下拉菜單。通過這種方式，當用戶選擇第一個下拉菜單中的選項時，第二個下拉菜單會相應地顯示相應的選項。這種技術在很多網站上都會用到，比如省市選擇、商品分類選擇等。

假設我們有一個表格，其中包含了多個省份和相應的城市信息。我們的目標是實現一個下拉菜單，當用戶選擇某個省份時，第二個下拉菜單會動態加載該省份的城市信息。

首先，我們需要創建一個包含省份和城市信息的數據庫表。以下是一個示例：

CREATE TABLE locations (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
province VARCHAR(50) NOT NULL,
city VARCHAR(50) NOT NULL
);

我們可以在表中插入一些示例數據：

INSERT INTO locations (province, city) VALUES
('北京', '北京市'),
('江蘇', '南京市'),
('江蘇', '蘇州市'),
('浙江', '杭州市'),
('浙江', '寧波市');

接下來，我們需要創建一個包含選項的HTML表單，在這個例子中，我們需要兩個下拉菜單：

<form>
<select id="province">
<option value="" selected disabled>請選擇省份</option>
<option value="北京">北京</option>
<option value="江蘇">江蘇</option>
<option value="浙江">浙江</option>
</select>
<select id="city">
<option value="" selected disabled>請選擇城市</option>
</select>
</form>

接下來，我們需要使用Ajax來加載城市信息。我們可以創建一個JavaScript函數，當選擇省份時觸發：

function loadCities() {
var province = document.getElementById("province").value;
if (province == "") {
document.getElementById("city").innerHTML = "<option value='' selected disabled>請選擇城市</option>";
return;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("city").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "get-cities.php?province=" + province, true);
xmlhttp.send();
}

上面的代碼中，我們首先獲取選擇的省份的值。如果省份沒有選擇，則將第二個下拉菜單重置為空，并停止執行后面的代碼。否則，我們創建一個XMLHttpRequest對象，并指定響應狀態改變時的回調函數。在這個回調函數中，如果請求成功，我們將從服務器獲取到的城市信息插入到第二個下拉菜單中。

接下來，我們需要創建一個用于獲取城市信息的PHP文件，這個文件將根據用戶選擇的省份來查詢數據庫表，并將結果返回給客戶端：

<?php
$province = $_GET['province'];
if (empty($province)) {
exit("沒有選擇省份");
}
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
$sql = "SELECT city FROM locations WHERE province = '$province'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='" . $row['city'] . "'>" . $row['city'] . "</option>";
}
} else {
echo "<option value='' selected disabled>該省份沒有城市信息</option>";
}
$conn->close();
?>

在上面的代碼中，我們首先獲取用戶選擇的省份。然后，我們創建一個數據庫連接并執行查詢語句，從該省份的城市信息中獲取結果。如果有結果，我們將這些結果作為選項返回給客戶端。如果沒有結果，我們將在第二個下拉菜單中顯示一條消息。

最后，我們需要將loadCities函數綁定到第一個下拉菜單的onchange事件上：

<script>
document.getElementById("province").onchange = loadCities;
</script>

現在，當用戶在省份下拉菜單中選擇一個選項時，第二個下拉菜單將會動態加載相應的城市信息。

通過上面的例子，我們可以看到如何使用PHP和Ajax來實現兩個聯動的下拉菜單。這種技術可以應用在各種網站中，幫助用戶更方便地選擇和篩選信息。