如何获取select下拉选项对应的PHP $animal变量值？

问题分析 #

你当前代码里的$animal仅在@foreach循环范围内有效，循环结束后只会保留最后一次遍历的动物实例，所以按钮跳转链接固定为最后一个动物的详情页，无法跟随下拉选项变动。

解决方案 #

方案1：原生JS动态修改跳转链接（适配路由路径参数场景）

给下拉框和跳转按钮增加标识，监听下拉框选择事件动态更新按钮跳转地址：

{{-- 给下拉框加ID，每个option存储对应详情页链接 --}}
<select id="animal-select">
@foreach ($animais as $animal)
  <option value="{{ $animal->id }}" data-url="{{ route("animals.show", $animal) }}">{{ $animal->nome }}</option>
@endforeach
</select>

{{-- 给a标签加ID，初始href设为占位符 --}}
<a id="view-animal-btn" href="#">
  <button type="button">查看</button>
</a>

<script>
const animalSelect = document.getElementById('animal-select')
const viewBtn = document.getElementById('view-animal-btn')
// 初始化默认选中项的跳转链接
viewBtn.href = animalSelect.options[animalSelect.selectedIndex].dataset.url
// 监听下拉框选择变动，更新跳转链接
animalSelect.addEventListener('change', function() {
  viewBtn.href = this.options[this.selectedIndex].dataset.url
})
</script>

方案2：表单提交实现（无JS需求）

如果可以接受用表单参数传递动物ID，直接把下拉框包裹在GET表单内即可：

<form action="{{ route('animals.show') }}" method="GET">
  <select name="animal">
  @foreach ($animais as $animal)
    <option value="{{ $animal->id }}">{{ $animal->nome }}</option>
  @endforeach
  </select>
  <button type="submit">查看</button>
</form>

注意：该方案需要你对应修改animals.show路由的参数接收逻辑，兼容从请求参数中获取动物ID

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