2012-03-26 101 views
1

我是Ruby on Rails的新手。 1個月前我開始研究RoR。 我的問題是:Ruby on Rails動態選擇框

我有一個名爲syscode的表,它有Id,Name,Desc和Parent_id。 對於父母Parent_id = 0和孩子,他們根據父母的id具有parent_id。

我應該在這第一個選擇框應顯示家長和第二個選擇框應是動態的,即在第一選擇框中父母的點擊就應該在第二個選擇框顯示相應的孩子的兩個選擇框。 我成功地通過單擊第一個選擇框中的選項來獲取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調用的返回值應該是javascript,它將用「dvShowChild」的內容替換當前選定父項的新html內容。

或者,你可以做一個ajax調用,獲取html,然後在成功回調中,用從ajax調用返回的html代替「dvShowChild」的html值。

+0

感謝您的回覆....我希望我的第一個下拉菜單始終是父母..在選擇父母時,它應該顯示第二個下拉菜單與其孩子.. – yrkapil 2012-03-26 09:15:56

+0

是的,這正是我的意思。當你在第一個選擇器中選擇某個東西時,可以用上面提到的方式之一來更改第二個選擇器的內容。使用ajax調用發送父ID,並在構建返回javascript或html模板時使用它。 – EasyPush 2012-03-26 09:26:14

+0

我沒有得到如何在軌道上做紅寶石...請幫助發佈示例代碼... – yrkapil 2012-03-26 09:41:19

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