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>

上述过滤器将在 URL 后附加 mysite.io/users/?work_type=full_time 并过滤所有全职工作的用户。我使用锚标记和 href 对所有过滤器都有效。

我无法解决的是如何使用选择菜单执行类似的方法来按城市过滤用户？

我的数据库中有一个城市列表。它们被动态添加到选择菜单并显示在页面上。

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

我想要实现的是选择菜单的“OnChange”如何将城市 ID 作为 &city=2

传递给请求查询参数

Answer 1

如果需要，您可以向下拉元素添加事件侦听器并重新加载页面或其他任何内容。让我们看一个使用查询参数重新加载页面的示例。 我稍微更改了您的选择下拉标记，添加了一个 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 处理程序。