Laravel中如何实现Select下拉选项选中后跳转至指定路由

问题原因 #

原代码无效的核心原因是：HTML规范不允许在<option>标签内嵌套<a>标签，浏览器渲染时会自动忽略<option>内的链接元素，因此选中操作不会触发跳转。

解决方案 #

1. 修改Blade模板代码

将跳转路由直接存入option的自定义属性中，同时保留原有参数、增加选中状态适配：

<select name="zone" autocomplete="off" class="custom-select" id="zoneSelect">
  <option data-placeholder="true" value="">Zone</option>
    @foreach ($zones as $key => $zone)
      <option value="{{ $key }}" 
        {{-- 拼接跳转地址，同时保留当前页面已有的查询参数 --}}
        data-url="{{ route(Route::current()->getName(), array_merge(request()->query(), ['zone' => $zone])) }}"
        {{-- 跳转后自动选中当前对应选项 --}}
        {{ request('zone') == $zone ? 'selected' : '' }}
      >
        {{ $zone }}
      </option>
    @endforeach
</select>

2. 添加事件监听触发跳转

不需要依赖第三方库的原生JS实现：

document.addEventListener('DOMContentLoaded', function() {
  const zoneSelect = document.getElementById('zoneSelect');
  zoneSelect.addEventListener('change', function() {
    const redirectUrl = this.options[this.selectedIndex].dataset.url;
    if (redirectUrl) {
      window.location.href = redirectUrl;
    }
  });
});

如果项目已经引入了jQuery，可以用更精简的写法：

$(function() {
  $('#zoneSelect').on('change', function() {
    const redirectUrl = $(this).find('option:selected').data('url');
    if (redirectUrl) window.location.href = redirectUrl;
  });
});

内容的提问来源于stack exchange，提问作者Abdo Rabah