1
<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?

Chandan
  • 11,465
  • 1
  • 6
  • 25
Nis shres
  • 39
  • 5

2 Answers2

0

I don't think link_to is good inside option tag since as soon the user click the option to select it will be redirect to specified path which you may not want.

Try this:

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

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

Sample Output: 

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

If you want to add tooltip in option you can either use title or create it using css or javascript

Example using 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") %>

Sample Output: 

<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>
Chandan
  • 11,465
  • 1
  • 6
  • 25
  • 1. Browsers won't actually even render the link. 2. This is not a correct use of the `title` attribute and what are you even trying to accomplish with it? – max Apr 13 '22 at 12:35
  • @max since the question included link inside option which is not possible as you pointed out i though he want to show tooltip which is why he is using the link inside option. – Chandan Apr 13 '22 at 16:31
  • 1
    You linked to a 12 year old question. `title` does nothing on option tags in modern browsers. – max Apr 13 '22 at 16:49
0

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.

max
  • 96,212
  • 14
  • 104
  • 165
  • How do I handle for selected? If params daily then keep in selected else other? – Nis shres Apr 18 '22 at 10:25
  • I would just use a checkbox instead of a select in the first place. If you use a "normal" checkbox and not the rails helper the parameters is not added to the query string if it's not checked. – max Apr 18 '22 at 10:37
  • I actually need the dropdown. That is why, I am not able to keep the selected based on params – Nis shres Apr 20 '22 at 18:15
  • This code doesnot work on safari why ? – Nis shres Apr 26 '22 at 09:13
  • Not sure. Thats a very standard event handler.. It could also be an issue if you don't wrap the code in callback that fires when the DOM is ready. https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event – max Apr 26 '22 at 11:52