2012-03-26 22 views
1

私はRuby on Railsの初心者です。私は1ヶ月前にRoRで作業を始めました。 私の問題は:Ruby on Railsの動的選択ボックス

私はId、名前、DescとParent_idを持つsyscodeと呼ばれる単一のテーブルがあります。 親の場合はParent_id = 0、子の場合は親のIDに従ってparent_idを持ちます。

最初の選択ボックスに親を表示し、2番目の選択ボックスを動的にする必要がある2つの選択ボックスが必要です。つまり、最初の選択ボックスで親をクリックすると、2番目の選択ボックスにそれぞれの子が表示されます。 最初の選択ボックスのオプションをクリックしてparent_idを取得できました。

私がしようとしたコードは次のとおりです。

ビュー:selectnew.html.erb

<div id="dvSelectSyscodeForm"> 
    <%= form_for(@syscode) do |f| %> 
    <div class="field"> 
     <label for="syscode_fksyscodeparent">Parent</label> 
     <%= f.select :fksyscodeparent, Syscode.where("fksyscodeparent = '0'").map {|s| ["#{s.syscode}", s.id ]} %> 
    </div> 
    <div id="dvShowChild" style="display:none;"> 
     <div class="field"> 
     <label for="childSyscodes">Child</label> 
     <%= f.select :fksyscodeparent, Syscode.where("fksyscodeparent = '0'").map {|s| ["#{s.syscode}", s.id ]} %> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     var scode = []; 
     function parentSelected() {   
     parent_id = $('#syscode_fksyscodeparent').val(); 
     alert(parent_id);   
     }  

     $(document).ready(function() { 
     parentSelected(); 
     $('#syscode_fksyscodeparent').change(parentSelected); 
     }); 

    </script> 
    <% end %> 
    </div> 
    <%= link_to 'Back', syscodes_path %> 

コントローラー:selectnew

def selectnew 
    @syscode = Syscode.new 
    respond_to do |format| 
    format.html # selectnew.html.erb 
    format.json { render json: @syscode } 
    end 
end 

私の男を助けてください...事前にありがとうございます... !!

答えて

0

parentSelected関数でAjax呼び出しを行う必要があります。このAjax呼び出しからの戻り値は、現在選択されている親の新しいhtmlコンテンツである "dvShowChild"の内容を置き換えるjavascriptでなければなりません。

また、htmlをフェッチするajax呼び出しを行い、成功コールバックで "dvShowChild"のhtml値をajax呼び出しから返されたhtmlに置き換えることができます。

+0

私の最初のドロップダウンは常に親になるようにします。親を選択すると、その子との2番目のドロップダウンが表示されるはずです。 – yrkapil

+0

はい、それはまさに私が意味していたものです。最初のセレクタで何かを選択すると、上記の方法のいずれかで2番目のセレクタの内容が変更されます。 ajax呼び出しで親IDを送信し、javascriptまたはhtmlテンプレートを作成するときにそれを使用します。 – EasyPush

+0

サンプルコードを投稿して助けてください... – yrkapil

0

あなたは、次の手順に従うことができます - ステップ-1ビューファイルで 親セレクトボックス

= f.select :parent_id, @parent_val, data: { remote: true, url: update_children_url} 
child select box 

= f.select :child_id, @child_values.present? ? @child_values : [], {prompt: 'Select' } 

ステップ-2 はあなたの意見にupdate_children.js.erbファイルを作成するには、 をフォルダを書き留め次のコード -

$("#child_id").html("#{j options_for_select(@child_values)}") 

ステップ - あなたのコントローラで3

def update_children 
    return values @child_values 
end 
関連する問題