jQuery是一個非常流行的JavaScript庫，它可以使網(wǎng)頁變得更加靈活，交互性更強。本文將介紹如何使用jQuery設(shè)置多級子選單。

首先，需要在HTML頁面中添加一個結(jié)構(gòu)相對簡單的父選單：

<select id="parent">
<option value="1">選單1</option>
<option value="2">選單2</option>
<option value="3">選單3</option>
</select>

接下來，在jQuery中需要定義一個函數(shù)來處理當父選單中的選項改變時，子選單應該顯示的選項：

$(document).ready(function() {
$('#parent').change(function() {
$('#child').html(''); // Reset child menu
var val = $(this).val(); // Get selected parent option
switch(val) {
case "1": //If '1' is selected
$('#child').append('<option value="4">選單1 - 選項1</option>');
$('#child').append('<option value="5">選單1 - 選項2</option>');
break;
case "2": //if '2' is selected
$('#child').append('<option value="6">選單2 - 選項1</option>');
$('#child').append('<option value="7">選單2 - 選項2</option>');
break;
case "3": //if '3' is selected
$('#child').append('<option value="8">選單3 - 選項1</option>');
$('#child').append('<option value="9">選單3 - 選項2</option>');
break;
default: //default case
$('#child').html('');
break;
}
});
});

上述代碼將通過切換父選單時（即通過$("#parent").change(...)）來動態(tài)生成子選單中的選項。使用類似的switch語句，我們根據(jù)父選單的不同選項添加子選單的選項。

最后，需要在HTML中添加子選單結(jié)構(gòu)：

<select id="child"></select>

可以在codepen中查看完整的jQuery多級子選單示例：

https://codepen.io/kimlopezx/pen/YzqEgJM