在 Active Admin（Rails 3.2，Active Admin 1.0）的依赖选择下拉列表中找不到错误答案

【问题标题】：Can't find the error in my dependent select drop down on Active Admin( Rails 3.2, Active Admin 1.0)在 Active Admin（Rails 3.2，Active Admin 1.0）的依赖选择下拉列表中找不到错误
【发布时间】：2013-12-18 14:21:43
【问题描述】：

我正在尝试构建一个具有三个模型的 RoR 应用程序：

游戏可以分为一个扇区（称为 GameSector）和一个子扇区（称为 GameSubsector）
一个部门由许多子部门组成。
一个子部门。

这是我的基本模型关系：

models/game.rb

belongs_to :game_sector,    :foreign_key => 'game_sector_id',   :counter_cache => true
belongs_to :game_subsector, :foreign_key => 'game_subsector_id',:counter_cache => true

我使用 Active Admin 输入游戏、部门或子部门信息。

当我创建游戏时，我有一个非常基本的表单，我只想让第二个选择下拉菜单 (game_subsector) 调整第一个选择 (gamesector) 的选择，这样我就不会全部（很长）game_subsectors 列表，但只有属于我选择的 game_sector 的列表。

在尝试了数十次测试和技术但都失败后，我终于使用了这个似乎与我相关的开发人员建议：http://samuelmullen.com/2011/02/dynamic-dropdowns-with-rails-jquery-and-ajax/。

但还是不行。

这是位于 admin/game.rb 上的 Active Admin 表单

ActiveAdmin.register Game do

  menu :parent => "Campaigns", :priority => 1

  controller do 
    with_role :admin_user      

      def game_subsectors_by_game_sector
      if params[:id].present?
        @game_subsectors = GameSector.find(params[:id]).game_subsectors
      else
        @game_subsectors = []
      end

      respond_to do |format|
        format.js
      end
    end

  end


form do |f|

    f.inputs "Details" do
      f.input :name
      f.input :game_sector_id,
        :label => "Select industry:",
        :as => :select, :collection => GameSector.all(:order => :name),
        :input_html => { :rel => "/game_sectors/game_subsectors_by_game_sector" }
      f.input :game_subsector_id, :as => :select, :collection => GameSubsector.all(:order => :name)

f.actions
  end

我觉得 javascript 甚至可能没有被触发。

我使用的 jquery 位于 app/assets/javascript/admin/active_admin.js（我更改了配置，因此它在加载活动管理页面时加载了这个 javascript）

jQuery.ajaxSetup({
  'beforeSend': function(xhr) { xhr.setRequestHeader("Accept", "text/javascript"); }
});

$.fn.subSelectWithAjax = function() {
  var that = this;

  this.change(function() {
    $.post(that.attr('rel'), {id: that.val()}, null, "script");
  });
};

$("#game_game_sector_id").subSelectWithAjax(); //it it found in my view???

最后我在 app/views/layout/game_subsectors_by_game_sector.js.erb 中创建了一个视图为this expert adviced:

$("#game_game_subsector_id").html('&lt;%= options_for_select(@game_subsectors.map {|sc| [sc.name, sc.id]}).gsub(/n/, '') %&gt;');

虽然我不确定我把它放在正确的地方......

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby-on-rails-3 activeadmin

【解决方案1】：

你需要的是：

使用您的网络浏览器控制台检查您的选择，并使用 CSS 选择器为扇区选择创建一个 jQuery 对象，类似于：
```
$('#sector_select')
```

向该对象附加一个处理程序，因此当它发生更改时会触发 AJAX 请求：

$('#sector_select').change(function(){
  $.ajax('/subsectors/for_select', {sector_id: $(this).val()})
    .done(function(response){ // 3. populate subsector select
      $('#subsector_select').html(response);
    });
});

参见代码中的 3，您需要检查以获取正确的 CSS 选择器。确保您在网络浏览器检查器的“网络”选项卡中获得预期的响应（如果使用 Chrome）。

您需要一个在/subsectors/for_select 中回答的控制器，在文件app/controllers/subsectors_controller.rb 中：

class SubsectorsController  < ApplicationController
  def for_select
    @subsectors = Subsector.where sector_id: params[:sector_id]
  end
end

您需要一个返回要填充的选项的视图app/views/subsectors/for_select.html.erb：

<% @subsectors.each do |ss| %>
  <option value="<%= ss.id %>"><%= ss.name %></option>
<% end %>

你需要一条路线：

get '/subsectors/for_select', to: 'subsectors#for_select'

【讨论】：