二級(jí)聯(lián)動(dòng)菜單是指在一個(gè)下拉菜單選擇項(xiàng)后，根據(jù)選擇的項(xiàng)動(dòng)態(tài)加載另一個(gè)下拉菜單的選項(xiàng)。在Web開發(fā)中，我們經(jīng)常會(huì)遇到需要實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單的場(chǎng)景，例如選擇一個(gè)國(guó)家后，根據(jù)國(guó)家的選擇動(dòng)態(tài)加載該國(guó)家的所有城市作為第二個(gè)下拉菜單的選項(xiàng)。本文將介紹如何使用PHP和HTML來(lái)實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單的功能。

在開始之前，我們先來(lái)看一個(gè)具體的例子來(lái)說(shuō)明二級(jí)聯(lián)動(dòng)菜單的實(shí)現(xiàn)過程。假設(shè)我們需要實(shí)現(xiàn)一個(gè)省份和城市選擇菜單，當(dāng)選擇一個(gè)省份后，加載該省份的所有城市作為第二個(gè)下拉菜單的選項(xiàng)。通過這個(gè)例子，我們可以更好地理解二級(jí)聯(lián)動(dòng)菜單的實(shí)現(xiàn)原理。

// HTML代碼
<label>選擇省份：
<select id="province" onchange="getCity(this.value)">
<option value="0" selected>請(qǐng)選擇</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣東</option>
</select>
</label>
<label>選擇城市：
<select id="city">
<option value="0" selected>請(qǐng)選擇</option>
</select>
</label>
// PHP代碼
function getCity($provinceId) {
// 根據(jù)省份ID查詢?cè)撌》莸某鞘辛斜?
$cityList = queryCityByProvinceId($provinceId);
// 將城市列表作為JSON數(shù)據(jù)返回給前端
echo json_encode($cityList);
}

在上述例子中，我們首先在HTML中定義了兩個(gè)下拉菜單，分別用于選擇省份和城市。在省份選擇菜單中，我們添加了一個(gè)onchange事件，當(dāng)選擇項(xiàng)發(fā)生變化時(shí)會(huì)觸發(fā)getCity函數(shù)。在getCity函數(shù)中，我們通過調(diào)用一個(gè)queryCityByProvinceId函數(shù)，傳遞了選擇的省份ID，并獲取該省份的所有城市列表。最后，我們將城市列表轉(zhuǎn)換為JSON格式，并通過echo語(yǔ)句返回給前端。

完成了前端的HTML和后端的PHP代碼后，我們需要在頁(yè)面的頭部引入jQuery庫(kù)和發(fā)起異步請(qǐng)求的JavaScript代碼。

// 引入jQuery庫(kù)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
// JavaScript代碼
<script>
function getCity(provinceId) {
$.ajax({
url: "get_city.php",
type: "POST",
data: {
provinceId: provinceId
},
dataType: "json",
success: function(response) {
// 清空城市選擇菜單
$("#city").empty();
// 添加城市選項(xiàng)
$.each(response, function(key, value) {
$("#city").append("<option value='" + value.id + "'>" + value.name + "</option>");
});
}
});
}
</script>

在上述JavaScript代碼中，我們使用了jQuery的ajax方法來(lái)發(fā)起異步請(qǐng)求。首先，我們指定了請(qǐng)求的URL為get_city.php，這是我們?cè)赑HP中實(shí)現(xiàn)獲取城市列表的腳本。接著，我們使用POST方法發(fā)送了一個(gè)名為provinceId的參數(shù)，值為選擇的省份ID。在成功返回?cái)?shù)據(jù)后，我們首先清空了城市選擇菜單的選項(xiàng)，然后通過遍歷返回的城市列表，逐個(gè)添加到城市選擇菜單中。

通過以上的代碼和說(shuō)明，我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的省份和城市選擇的二級(jí)聯(lián)動(dòng)菜單。通過選取不同的省份，加載相應(yīng)的城市列表作為第二個(gè)下拉菜單的選項(xiàng)。這種方法對(duì)于其他的二級(jí)聯(lián)動(dòng)菜單也適用，只需根據(jù)實(shí)際情況來(lái)定義HTML的結(jié)構(gòu)，并在PHP中實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)查詢即可。