Rails,在第二个下拉列表中选择下拉过滤器值中的选项

时间:2013-09-24 02:30:23

标签: forms jquery ruby-on-rails-3.2

我试图在我的rails应用中创建一些页面,使用我从一些Railscast中学到的东西。我的环境如下:

Rails 3.2.13

ruby​​ 1.9.3p448

使用所选宝石

数据库SQLite

当我想创建新的个人资料时,我会访问localhost:3000 / profiles / new。 我的配置文件中有一个名为Name的文本框。接下来我有一个下拉列表 在哪里使用可以选择什么配置文件类型 - 管理员,编辑或用户。曾经 选项被选中,另一个下拉变为可见 - 特征。用户可以 然后选择1个或多个特征。

对于每种配置文件类型(管理员,编辑者,用户),都有不同的特征。所以 Traits模型具有字段名称和trait_type,其中trait_type将具有值 管理员,编辑或用户。

我在编写视图时遇到问题,假设我应该在那里编码,但也许我 应该在控制器中,让Traits下拉显示只显示 如果我选择个人资料类型的管理员,则为管理员特征。

有人可以给我一个积极的推动方向吗?铭记于心 我对此很陌生。希望我提供足够的,而不是太多的信息。

注意:我的profiles.js.coffee文件中的console.log条目是临时的 所以我可以看到发生了什么。

谢谢,

HoGi

-------------------------------------------------
/app/assets/javascripts/application.js
-------------------------------------------------
    //= require jquery
    //= require jquery_ujs
    //= require chosen-jquery
    //= require_tree .
-------------------------------------------------


-------------------------------------------------
/app/assets/javascripts/profiles.js.coffee
-------------------------------------------------
jQuery ->
  $('#profile_trait_ids').chosen()

jQuery ->
  $('#profile_trait_ids').parent().hide()
  prof_types = $('#profile_prof_type').html()
  console.log(prof_types)
  $('#profile_prof_type').change ->
    prof_type = $('#profile_prof_type :selected').text()
    console.log(prof_type)
    $('#profile_trait_ids').parent().show()
-------------------------------------------------  


-------------------------------------------------
/app/assets/stylesheets/application.css
-------------------------------------------------
*= require_self
 *= require chosen
 *= require_tree .
 */
-------------------------------------------------


-------------------------------------------------
/app/models/profile.rb
-------------------------------------------------
class Profile < ActiveRecord::Base
  attr_accessible :active, :name, :prof_type, :trait_ids

  has_many :traitships
  has_many :traits, through: :traitships

  PROFILE_TYPES = ["Admin", "Editor", "User"]

end
-------------------------------------------------


-------------------------------------------------
/app/models/trait.rb
-------------------------------------------------
class Trait < ActiveRecord::Base
  attr_accessible :active, :name, :trait_type

  has_many :traitships
  has_many :profiles, through: :traitships
end
-------------------------------------------------


-------------------------------------------------
/app/models/traitship
-------------------------------------------------
class Traitship < ActiveRecord::Base
  #attr_accessible :profile_id, :traid_id

  belongs_to :profile
  belongs_to :trait
end
-------------------------------------------------


-------------------------------------------------
/app/views/_form.html.erb
-------------------------------------------------
<%= form_for(@profile) do |f| %>
  <% if @profile.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@profile.errors.count, "error") %> prohibited this profile from being saved:</h2>

      <ul>
      <% @profile.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :prof_type, 'Profile Type' %><br />
    <%= f.select :prof_type, Profile::PROFILE_TYPES, prompt: 'Select a type' %>
  </div>
  <div class="field">
    <%= f.label :trait_ids, "Traits" %><br />
    <%= f.collection_select :trait_ids, Trait.order(:name), :id, :name, {}, { multiple: true } %>
  </div>
  <div class="field">
    <%= f.label :active %><br />
    <%= f.check_box :active %>
  </div>
  <div class="actions">
    <%= f.submit 'Update' %>
  </div>
<% end %>
-------------------------------------------------

更新控制器: (traits_controller)

# GET /traits/:trait_type/trait_options
  # GET /traits/:trait_type/trait_options.json
  def trait_options
    @traits = Trait.order(:name).where("trait_type like ?", params[:trait_type])

    respond_to do |format|
      format.html # trait_options.html.erb
      format.json { render json: @traits }
    end
  end

1 个答案:

答案 0 :(得分:0)

第1部分

您应该向控制器添加一个新操作(traits_controller),将一个参数profile_type作为输入,并将该traits的所有profile_type作为json / xml返回。

第2部分

准备就绪之后,您应该在on_change下拉列表的profile_type事件中通过ajax调用此操作。使用收到的数据构建新的traits下拉列表。

chosenselect2等,一旦您的第1部分准备好,就应该很容易实现。

<强>更新

我自己从未使用chosen。但是看看它的文档,这样的东西可能适合你

$('#profile_type').on('change', function() {
    $("#traits").chosen().change( … );
    $("#traits").trigger("chosen:updated");
});

Railscast (Episode #258)演示了如何使用json数据填充chosen select

如果可以放弃chosen支持select2,我强烈建议您这样做。