Active-admin select drop dependent load based on first drop down

Question

I am new to ruby on rails and active admin, I need to create two dropdown list one is location and another one is game.

The game is based on location so if I select a location from dropdown list it should display games which are related to that particular location in the second drop down.

Can you help me ?

    form do |f|
       f.inputs do
       f.input :location_id, :as => :select, :collection => Location.all.collect {|var| [var.location, var.id] }
       f.input :game_id, :as => :select, :collection => Game.all.collect {|var| [var.game, var.id] }
    end
    f.actions
end

You need to use javascript for this. – mikdiet Mar 09 '17 at 12:53 — mikdiet, Mar 09 '17 at 12:53
I wanted to ask you if you have an update. Thanks Fabrizio – Fabrizio Bertoglio Mar 13 '17 at 08:06 — Fabrizio Bertoglio, Mar 13 '17 at 08:06

score 0 · Answer 1 · edited May 23 '17 at 12:09

yes, it is pretty easy. You just need to include Javascript code for getting the dropdown closed and open. So that when the user clicks on the dropdown, the dropdown will open.

jquery example for managing the click event

$('.divtobeclicked').click(function() {
     $('.dropdown').toggle()
});

Then the dropdown HTML will be somethink like this, i class="icon.." is a fontawesome icon, so you will need to include in your project the fontawesome gem.

<div class="divtobeclicked">
    <i class="icon-task-l"></i>
</div>
<div class="dropdown">
  <ul>
   <li>first option</li>
   <li>first option</li>
   <li>first option</li>
  </ul>
</div>

then you need to edit those li so that they are compatible with rails.

<%= form do |f| %>
    <li><%= f.input :location_id ..... %></li>
    .....
<% end %>

You can find easily online di css/javascript code.

this is the css/html dropdown that you will need to adapt for rails https://www.w3schools.com/CSS/css_dropdowns.asp

hear you find an explanation on how to toggle a div with javascript of jquery toggle show/hide div with button?

To use javascript, css in your project you will need some familiarity with the asset pipeline.

Active-admin select drop dependent load based on first drop down

1 Answers1