Select field , give option on 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>

I want to give link to option field of select. It doesnot work. ANy other ways?

Answer 1

Using a link inside an option tag is a very bad idea since its invalid HTML. In fact <option> tags cannot contain any other elements. The permitted contents are "Text, possibly with escaped characters (like é).".

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

The link won't be clickable as the browser will most likely just ignore the <a> tag.

What you most likely actually want to is create a form that sends GET requests:

<%= 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 %>

If you want the form to submit as soon as the user changes the select you need to use JavaScript to add a change event handler.

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

Or you could just use actual links instead of a form and style them to get the desired user interface.