JavaScript 實現多下拉框按鈕切換顯示/隱藏

需求：點擊按鈕切換對應下拉框，其餘隱藏

頁面有四個類別按鈕（雜誌、網站、APP、報紙），每個按鈕對應一個 <select> 下拉框。點擊某按鈕時，顯示對應下拉框，隱藏其他。

實現思路

1. 為每個按鈕添加自定義屬性 data-sort，值對應目標下拉框的 id。
2. 給所有按鈕統一 class（如 btn），所有下拉框統一選取。
3. 點擊事件中：先隱藏所有下拉框，再根據 data-sort 顯示目標下拉框。

核心代碼

var btns = document.querySelectorAll('.btn');
var selects = document.querySelectorAll('select');

for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        // 隱藏所有
        for (var t = 0; t < selects.length; t++) {
            selects[t].style.display = 'none';
        }
        // 顯示目標
        var attr = this.getAttribute('data-sort');
        var target = document.querySelector('#' + attr);
        if (target) target.style.display = 'block';
    };
}

進階優化

• 使用 classList.toggle 或 CSS class 控制顯示/隱藏，分離樣式與邏輯。
• 若下拉框較多，可建立 Map<string, HTMLSelectElement> 快速查找。
• 考慮無障礙：添加 aria-expanded、鍵盤焦點管理。

此模式適用於標籤切換、表單動態顯示等場景。