[筆記] JavaScript 雙層選單篩選連動 @地瓜大的飛翔旅程

章節連結

解決方法

在網頁前端開發中常見的雙層以上的篩選器，要怎麼順利的傳遞兩個以上的參數到後端呢？運用一些設計上的小技巧就可以辦到了。

解決方法

基本上，當使用者第一次傳遞參數到後端時，後端查找資料後，要回傳使用者所得的資料和「原先設定的參數」渲染到網頁上。這樣才能達成多重篩選的目的。

// 方法一：運用 data-item 留下使用者的值，並在使用者點選下拉按鈕時，取代原有網址
let monthDropdownBtn = document.querySelector('.monthDropdownBtn')
if (monthDropdownBtn) {
  monthDropdownBtn.addEventListener('click', function (e) {
    let monthDropdownItem = document.querySelectorAll('.monthDropdownItem')
    for (let i = 0; i < monthDropdownItem.length; i++) {
      let item = monthDropdownItem[i]
      let categoryDropdownBtn = document.querySelector('.categoryDropdownBtn')
      let category = categoryDropdownBtn.getAttribute('data-item')
      let temp = item.getAttribute('href').split("&")
      monthDropdownItem[i].setAttribute('href', temp[0] + '&filterCategory=' + category)
    }
  })
}

// 方法二：每次都將使用者前次提供的參數一同回傳。若使用者先點 category，那之後渲染的連結網址預設就會有 category 在月份的連結中
<div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item monthDropdownItem" href="/?month=Jan&category={{key2}}">一月</a>
</div>
<div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item categoryDropdownItem" href="/?category=home&month={{key1}}">家居物業</a>
</div>