jQuery Rails动态选择菜单

Question

我按照railscast编号88创建动态选择菜单：http://railscasts.com/episodes/88-dynamic-select-menus-revised?view=asciicast

基本上我要有两个下拉菜单，一个用于State，一个用于City。功能如下：在第一个下拉菜单中选择状态后，城市菜单将动态更改，仅显示给定状态的城市，即。选择明尼苏达州为州，在城市菜单中将显示圣保罗，明尼阿波利斯等。然后，用户可以根据这些结果选择城市。

我正在使用的模型是：

class Campaign < ActiveRecord::Base
    has_many :campaign_cities, dependent: :destroy
    has_many :cities, through: :campaign_cities
end

class State < ActiveRecord::Base
    has_many :cities
end

class City < ActiveRecord::Base
    belongs_to :state

    has_many :campaign_cities, dependent: :destroy
    has_many :campaigns, through: :campaign_cities
end

class CampaignCity < ActiveRecord::Base
    belongs_to :city
    belongs_to :campaign
end

按照railscast大纲，我已成功将城市分组到各自的状态（顶部的State菜单，底部的City菜单）：

但是我在jQuery部分打了一堵墙，只允许显示处于选定状态的城市。查看我的rails应用程序中的源代码，该集合选择我设置为州的城市和城市：

    <%= f.collection_select :id, State.order(:state), :id, :state %>

    <%= f.grouped_collection_select :city_ids, State.order(:state), :cities, :state, :id, :city %>

对于html <select id>，查看页面源，它​​为状态标识符设置campaign_id：

对于城市而言，<select id>为campaign_city_ids：

按照视频的方向，输入我的ID，我来到jQuery：

jQuery ->
  cities = $('#campaign_city_ids').html()
  console.log(cities)
  $('#campaign_id').change ->
    state = $('#campaign_id :selected').text()
    options = $(cities).filter("optgroup[label=#{state}]").html()
    console.log(options)
    if options
      $('#campaign_city_ids').html(options)
    else
      $('#campaign_city_ids').empty();

但它不允许条件菜单结构工作，即。能够选择一个州，比如加利福尼亚州，城市菜单会自动只显示加利福尼亚州的城市然后被选中。

如何修复jQuery代码以使其正常工作？