Select 字段，在 link 上提供选项

Question

<select class="form-control filter" id="filter" >
    <option value="<%=  profile_path(@profile)%>" > <%= link_to "Weekly", profile_path(@profile), class: 'form-control'%> </option>
    <option <%= params[:daily] ? "selected" : "" %> value="<%= profile_path(@profile,:daily => "true")%>"> <%= link_to "Daily", profile_path(@profile,:daily => "true"), class: 'form-control' %></option>
</select>

我想给 select 的选项字段 link。它不起作用。还有其他方法吗？

Answer 1

我认为 link_to 在选项标签内不好，因为一旦用户单击 select 的选项，它就会重定向到您可能不想要的指定路径。

试试这个：

options = [
  [
    "Weekly",
    profile_path(@profile)
  ],
  [
    "Daily",
    profile_path(@profile, :daily => "true")
  ]
]

<%= select_tag :filter, options_for_select(options, "Daily") %>

示例输出：

<select id="filter">
  <option value="/profile/1">Weekly</option>
  <option value="/profile/2&daily=true">Daily</option>
</select>

如果你想在选项中添加 tooltip 你可以使用 title or create it using css or javascript

示例使用 `title`

options = [
  [
    "Weekly",
    profile_path(@profile),
    { :title => profile_path(@profile) }
  ],
  [
    "Daily",
    profile_path(@profile, :daily => "true"),
    { :title => profile_path(@profile, :daily => "true") }
  ]
]

<%= select_tag :filter, options_for_select(options, "Daily") %>

示例输出：

<select id="filter">
  <option title="/profile/1" value="/profile/1">Weekly</option>
  <option title="/profile/2&daily=true" value="/profile/2&daily=true">Daily</option>
</select>

Answer 2

在选项标签中使用 link 是一个非常糟糕的主意，因为它无效 HTML。事实上 <option> 标签不能包含任何其他元素。 The permitted contents are "Text, possibly with escaped characters (like é).".

<select>
  <option>I just broke the internets <a href="#">click me</a></option>
</select>

link 将不可点击，因为浏览器很可能会忽略 <a> 标签。

您最有可能真正想要的是创建一个发送 GET 请求的表单：

<%= form_with(url: profile_path, method: :get) do |form| %>
  <%= form.label :daily %>
  <%= form.select :daily, ["true", "false"], class: 'instant-submit' %>
  <%= f.submit "View profiles" %>
<% end %>

如果您希望表单在用户更改后立即提交 select 您需要使用 JavaScript 添加更改事件处理程序。

const elements = document.querySelectorAll('.instant-submit');
elements.forEach((element) =>{
  element.addEventListener('change', (event) => {
    event.target.form.requestSubmit();
  });
});

或者您可以只使用实际的 link 代替表单并设置样式以获得所需的用户界面。

Select 字段，在 link 上提供选项

Select field , give option on link

javascript

ruby

select

ruby-on-rails

dropdown

示例使用 `title`

Select 字段，在 link 上提供选项

Select field , give option on link

javascript

ruby

select

ruby-on-rails

dropdown

示例使用 title

示例使用 `title`