jQuery是一款使用廣泛的JavaScript庫，它簡化了JavaScript的編寫，使得在網站中運用JS變得更加方便和高效。一種特別常見的應用場景是n級聯動，即當一個下拉菜單選定一個值時，另一個下拉菜單的選項就會根據上一個選項而變化。換句話說，這些下拉菜單是相互關聯的，因此選項的選擇是有先后關系的。

// 下拉菜單數據
const data = {
"汽車品牌": ["寶馬", "奔馳", "奧迪"],
"寶馬": ["X1", "X3", "X5"],
"奔馳": ["A級", "C級", "E級"],
"奧迪": ["A3", "A4", "A6"]
};
// 初始化
$(document).ready(function() {
// 第一個下拉菜單
let firstSelect = $('');
for (let key in data) {
firstSelect.append($(`${key}`));
}
$('body').append(firstSelect);
//第二個下拉菜單
let secondSelect = $('');
$('body').append(secondSelect);
//第三個下拉菜單
let thirdSelect = $('');
$('body').append(thirdSelect);
// 監聽第一個下拉菜單變化
firstSelect.change(function() {
let selectedItem = $(this).val();
resetSelect(secondSelect);
resetSelect(thirdSelect);
if(selectedItem === "汽車品牌") {
return;
}
let options = data[selectedItem];
for(let i=0; i${options[i]}`));
}
});
// 監聽第二個下拉菜單變化
secondSelect.change(function() {
let selectedItem = $(this).val();
resetSelect(thirdSelect);
if(selectedItem === "") {
return;
}
let options = data[selectedItem];
if(!options) {
return;
}
for(let i=0; i${options[i]}`));
}
});
});
// 重置下拉菜單選項
function resetSelect(select) {
select.empty();
select.append($(``));
}

上述代碼展示了如何使用jQuery實現n級聯動。在上面的代碼片段中，我們定義了一個名為data的JavaScript對象，它描述了各級下拉菜單之間的關系。然后我們創建了三個下拉菜單，并添加到頁面上。通過監聽前一個下拉菜單的變化，我們可以根據當前選項修改接下來的下拉菜單的選項。resetSelect()函數用于重置之后的下拉菜單的選項。+