最初のドロップダウンに基づいてActive-adminを選択ドロップ依存の負荷

Question

私はレールとアクティブな管理者のルビーに新しいです、私は2つのドロップダウンリストを作成する必要があります1つの場所ともう一つはゲームです。

ゲームは場所に基づいているので、ドロップダウンリストから場所を選択すると、その特定の場所に関連するゲームが2番目のドロップダウンに表示されます。

私を助けることができますか？

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 

Answer 1

はい、かなり簡単です。ドロップダウンを閉じて開いているには、Javascriptコードをインクルードする必要があります。ユーザーがドロップダウンをクリックすると、ドロップダウンが開きます。クリックイベント

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

を管理するための

jqueryの例は、次にドロップダウンHTMLをあなたのプロジェクトfontawesomeの宝石に含める必要がありますのでi class="icon.."は、fontawesomeアイコンで、このようsomethinkされます。

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

これらのファイルを編集して、レールと互換性があるようにする必要があります。

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

オンラインのdi css/javascriptコードを簡単に見つけることができます。

これはあなたがレール https://www.w3schools.com/CSS/css_dropdowns.asp

のために適応する必要があります。CSS/HTMLのドロップダウンリストでは、JavaScriptを使用するにはjqueryの toggle show/hide div with button?

のJavaScriptでdiv要素を切り替える方法についての説明を見つける聞きますあなたのプロジェクトでは、資産パイプラインに精通している必要があります。