Laravel select onchange更新請求查詢參數

Question

在我的 Laravel 應用程序的前端，我有一個用戶列表（尋找工作的人），我有過濾器來過濾使用 request() 附加 URL 的用戶的某些參數。

我當前的過濾器都是錨點，所以我使用 HREF 屬性來更新 url，如下所示：

按全職過濾

<a href="{{route('users.index', array_merge(request()->query(), ['work_type' => 'full_time'])) }}" class="list-group-item"> Full Time </a>

上面的過濾器將 append 和 url 與mysite.io/users/?work_type=full_time並過濾所有全職工作的用戶。 我讓這一切都適用於使用錨標簽和 href 的所有過濾器。

我無法解決的是如何使用 Select 菜單執行類似的方法來按城市過濾用戶？

我的數據庫中有一個城市列表。 它們被動態添加到 select 菜單並顯示在頁面上。

<select>
  <option value="1">City Name 1</option>
  <option value="2">City Name 2</option>
</select>

我想要實現的是 select 菜單的“OnChange”如何將城市 ID 作為&city=2傳遞給請求查詢參數

Answer 1

您可以將事件偵聽器添加到下拉元素，並根據需要重新加載頁面或其他任何內容。 讓我們看一個使用查詢參數重新加載頁面的示例。 我稍微更改了您的 select 下拉標記，添加了 ID 和默認選項，

<select id="myFancyDropdown">
    <option>Choose city</option>
    <option value="1">City Name 1</option>
    <option value="2">City Name 2</option>
</select>

然后在 JS 中，當下拉列表改變時做你的事情，

let elmSelect = document.getElementById('myFancyDropdown');

if (!!elmSelect) {
    elmSelect.addEventListener('change', e => {
        let choice = e.target.value;
        if (!choice) return;

        let url = new URL(window.location.href);
        url.searchParams.set('city', choice);
        // console.log(url);
        window.location.href = url; // reloads the page
    });
}

Answer 2

您可以使用表單來設置 URL 參數。

<form id="myForm" method="get">
  <button
    id="workTypeButton"
    type="button"
    data-value="full_time"
    onclick="setWorkTypeInput(this);"
  >
    Full Time
  </button>
  <select name="city">
    <option value="1" {{ request('city') === '1' ? 'selected' : '' }}>City Name 1</option>
    <option value="2" {{ request('city') === '2' ? 'selected' : '' }}>City Name 2</option>
  </select>
  <input id="workTypeInput" type="hidden" name="work_type" value="{{ request('work_type') }}">
</form>

然后添加一個事件偵聽器來提交表單，如果其中的任何輸入發生更改。 您可以將按鈕 (workTypeButton) onclick 事件綁定到表單內的隱藏輸入 (workTypeInput)，而不是使用錨點進行過濾。

  let myForm = document.getElementById('myForm');
  let workTypeInput = document.getElementById('workTypeInput');

  myForm.querySelectorAll('input, select, textarea')
    .forEach(item => {
      item.addEventListener('change', event => {
        myForm.submit();
      });
    });

  function setWorkTypeInput(event) {
    let changeEvent = new Event('change');

    workTypeInput.value = event.dataset.value;

    workTypeInput.dispatchEvent(changeEvent);
  }

如果您使用單選框或復選框來設置工作類型。 這樣您就不需要定義 onclick 處理程序。