Rails中分类下拉框实现及链接点击无响应问题解决

嘿，我一眼就看出问题所在了——你的写法不符合HTML规范，所以浏览器根本不会理你<option>里的链接！

HTML里的<option>标签只能包含纯文本内容，不能嵌套像<a>（也就是link_to生成的标签）这样的交互式元素。浏览器解析的时候会直接忽略掉<option>里的链接，所以点击选项自然没反应。

下面给你两种靠谱的解决办法，任选其一就行：

方法一：用JavaScript监听下拉框选择事件（推荐，体验流畅） #

这种方式不需要额外按钮，用户选完直接跳转，体验最好。

首先修改你的ERB代码，把分类的路径存在<option>的value属性里：

<select id="category-dropdown">
  <option value="">Select Category You Like</option>
  <% @categories.each do |category| %>
    <option value="<%= category_path(category) %>"><%= category.category %></option>
  <% end %>
</select>

然后添加一段JavaScript代码，监听下拉框的change事件，当用户选择有效选项时跳转到对应页面：

// 可以放在页面的<script>标签里，或者你的application.js文件中
document.getElementById('category-dropdown').addEventListener('change', function(event) {
  const targetUrl = event.target.value;
  // 只有当选择的不是默认提示选项时才跳转
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

方法二：用表单提交的方式（无需JS） #

如果你不想用JavaScript，可以把下拉框放在表单里，让用户选完后点击按钮跳转：

<%= form_tag('', method: :get) do %>
  <%= select_tag :category, 
                  options_for_select(
                    @categories.map { |cat| [cat.category, category_path(cat)] },
                    prompt: 'Select Category You Like'
                  ) %>
  <%= submit_tag 'Go to Category', class: 'btn' %>
<% end %>

这种方式需要用户多点击一次按钮，但好处是完全不需要JS支持。

总结一下，核心就是别在<option>里嵌套链接，这是HTML不允许的，上面两种方法都能完美解决你的问题～

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