JQuery Cascade Select 是一種靈活而強大的選擇框組件，能夠快速地在 HTML 表單中創建聯動下拉列表。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jquery.cascadeSelect.js"></script>

通過調用 jQuery 命令來初始化一個 Cascade Select，提供分類數據。

<select id="categories">
<option value="">請選擇分類...</option>
<option value="fruits">水果</option>
<option value="vegetables">蔬菜</option>
</select>
<select id="items">
<option value="">請先選擇分類...</option>
</select>
<script>
$('#categories').cascadeSelect({
dataSource: 'data.json',
target: '#items',
selectValue: function(data) {
return data[this.value];
}
});
</script>

這個示例加載數據并聯動兩個選擇框：分類和項目。當一個分類被選擇時，第二個選擇框中的項目將根據該分類來進行選擇。此外，data.json 中包含的數據文件將被使用。

在 data.json 中，您將發現一個名為 "categories" 的對象，其中包含兩個屬性 "fruits" 和 "vegetables" 。每個屬性分別對應每個分類，它們都是一個包含項目的數組。

{
"categories": {
"fruits": ["蘋果", "香蕉", "橙子", "葡萄"],
"vegetables": ["菜花", "青菜", "胡蘿卜", "西紅柿"]
}
}

Cascade Select 將自動處理所有的選擇框并在運行時調整它們的內容。通過它，您可以快速輕松地為您的表單創建動態交互。