Create a drop down list of many links in rails

问题:

I have many links about for example link1, link2, link3, link4 ...link9. I have to add those links in the drop down. I tried with rails select_tag and also with html tag

Using html select tag

<span class="device_update">
    <select>
      <option value="link1"><%= link_to "link1", "#",{:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %></option>
      <option value="link2"><%= link_to "link2", "#",{:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %></option>
      <option value="link3"><%= link_to "link3", "#",{:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %></option>
           ......

      <option value="link9"><%= link_to "link9", "#",{:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %></option>
        </select>
    </span>

How can I make drop down lists of many links

回答1:

I did this by following way. For this I refer bootstrap button dropdowns

<div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><%= link_to "link1", "#",{:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %></li>
        <li><%= link_to "link1", "#",{:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %></li>
        <li><%= link_to "link3", "#",{:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %></li>
        <li class="divider"></li>
        <li><%= link_to "link4", "#",{:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'} %></li>
      </ul>
    </div>

回答2:

As @anonymousxxx said,you can't have a link_to or a hyperlink inside an optiontag.

You better use jquery slideToggle() to list the drop-down of links

<div class="button">click me</div>
<div class="dropdown">
    <a href="">link1</a>
    <a href="">link2</a>
    <a href="">link3</a>
    <a href="">link4</a>
</div>

And the Jquery code is

$(".button").click(function(){
    $(".dropdown").slideToggle();
});

Working Demo