Laravel选择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
    });
}