【问题标题】：Dynamic Select Box in Ruby on RailsRuby on Rails 中的动态选择框
【发布时间】：2012-03-26 07:51:19
【问题描述】：

我是 Ruby on Rails 的新手。我在 1 个月前就开始研究 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 %>

控制器：选择新

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

请帮帮我......提前谢谢你......！！

【问题讨论】：

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

【解决方案1】：

您需要在 parentSelected 函数中进行 Ajax 调用。此 Ajax 调用的返回应该是 javascript，它将“dvShowChild”的内容替换为当前选定父级的新 html 内容。

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

【讨论】：

感谢您的回复..我希望我的第一个下拉列表始终是父级..在选择父级时，它应该显示第二个下拉列表及其子级..
是的，这正是我的意思。当您在第一个选择器中选择某些内容时，您会以我上面提到的一种方式更改第二个选择器的内容。使用 ajax 调用发送父 ID，并在构造返回的 javascript 或 html 模板时使用它。
我不知道如何在 ruby on rails 中做到这一点...请通过发布示例代码来帮助...
感谢EasyPush ...我按照您指导我的方式，经过2天的长期努力，我成功获得了结果...
对不起，我无法发布示例代码，现场没有任何可用的代码。但我很高兴你解决了它。如果你接受我的回答，我可能会更高兴;)

【解决方案2】：

您可以按照以下步骤操作 - 步骤 -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

【讨论】：