Ruby on Rails中的动态选择框

时间:2012-03-26 07:51:20

标签: ruby-on-rails ruby-on-rails-3 ruby-on-rails-3.2

我是Ruby on Rails的新手。我已经开始在一个月前开始研究RoR了。 我的问题是:

我有一个名为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

请帮帮我们......先谢谢你们!! !!

2 个答案:

答案 0 :(得分:0)

您需要在parentSelected函数中执行Ajax调用。从这个Ajax调用返回的应该是javascript,用当前所选父级的新html内容替换“dvShowChild”的内容。

或者,您可以执行一个获取html的ajax调用,然后在成功回调中使用从ajax调用返回的html替换“dvShowChild”的html值。

答案 1 :(得分: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     在views文件夹中创建update_children.js.erb文件     并记下以下代码 -

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

步骤-3   在您的控制器中

def update_children
  return values @child_values
end