JSP 下拉選單聯動顯示對應列表資料

需求背景

初學者常遇到的需求：根據下拉選單選擇的菜系（如湘菜、川菜），動態顯示對應的菜單列表。本文提供一個純前端 JavaScript 實現方案，無需後端交互，適合靜態資料展示。

核心邏輯

準備多個 <div> 容器分別承載不同菜系的表格資料，預設全部隱藏（display:none）。監聽 <select> 的 onchange 事件，根據 value 顯示對應容器，其餘隱藏。

完整實現代碼

<script>
function showList() {
    // 先隱藏所有列表容器
    ['div0','div1','div2'].forEach(id => {
        document.getElementById(id).style.display = 'none';
    });
    // 根據選項顯示對應容器
    var val = document.getElementById('dishType').value;
    if (val) document.getElementById('div' + val).style.display = 'block';
}
</script>

<select id="dishType" onchange="showList()">
    <option value="0">請選擇菜系</option>
    <option value="1">湘菜</option>
    <option value="2">川菜</option>
</select>

<div id="div0"><table>...空白表頭...</table></div>
<div id="div1" style="display:none"><table>...湘菜資料...</table></div>
<div id="div2" style="display:none"><table>...川菜資料...</table></div>

進階優化方向

• 資料分離：將菜單資料存為 JSON，JavaScript 動態渲染表格，便於維護擴展。
• 無障礙優化：添加 aria-controls、aria-expanded 屬性提升螢幕閱讀器體驗。
• 動畫過渡：配合 CSS transition 實現淡入淡出效果。