javascript - 动态生成的选择菜单在编辑 View 中不保持状态

Question

我正在按照 Railscast 88 创建一个动态相关的下拉菜单。 http://railscasts.com/episodes/88-dynamic-select-menus

我在以多模型形式使用的部分中呈现这些下拉菜单。我使用的表单遵循 Ryan Bates 的 Advanced Rails Recipes 流程。因为我在局部渲染下拉列表，所以我不得不偏离严格遵循 Railscast 代码。在上面提供的 Railscast 链接上，评论 30-31 和 60-62 解决了这些问题并提供了我使用的方法。

对于新记录，一切都很好。我从下拉列表中选择一个父对象，Javascript 动态地将子选项限制为仅与我选择的父对象关联的那些项目。我可以保存我的选择并且一切正常。

问题是，当我返回编辑页面并单击子选择下拉菜单时，将其绑定(bind)到父对象的约束不再存在。我现在可以选择任何 child ，无论它是否连接到 parent 。这是一个主要的用户体验问题，因为子对象列表太长太复杂。我需要子选项始终取决于所选的父项。

这是我的代码:

Controller #javascripts

def dynamic_varieties
    @varieties = Variety.find(:all)
  respond_to do |format|
    format.js
  end
end

Views#javascripts #dynamic_varieties.js.erb

var varieties = new Array();
<% for variety in @varieties -%>
  varieties.push(new Array(<%= variety.product_id %>, '<%=h variety.name %>', <%= variety.id %>));
<% end -%>

function collectionSelected(e) {
  product_id = e.getValue();
  options = e.next(1).options;
  options.length = 1;
  varieties.each(function(variety) {
    if (variety[0] == product_id) {
      options[options.length] = new Option(variety[1], variety[2]);
    }
  }); 
}

Views#users #edit.html.erb

<% javascript 'dynamic_varieties' %>
<%= render :partial => 'form' %>  

查看#users #_form.html.erb

<%= add_season_link "+ Add another product" %>  
<%= render :partial => 'season', :collection => @user.seasons %>  

查看#users #_season.html.erb

<div class="season">
<% new_or_existing = season.new_record? ? 'new' : 'existing' %>
<% prefix = "user[#{new_or_existing}_season_attributes][]" %>

<% fields_for prefix, season do |season_form| -%>
  <%= error_messages_for :season, :object => season %>
      <div class="each">
          <p class="drop">
            <label for = "user_product_id">Product:</label> <%= season_form.collection_select :product_id, Product.find(:all), :id, :name, {:prompt => "Select Product"}, {:onchange => "collectionSelected(this);"} %>
            <label for="user_variety_id">Variety:</label>
            <%= season_form.collection_select :variety_id, Variety.find(:all), :id, :name, :prompt => "Select Variety" %>
          </p>

          <p class="removeMarket">
            <%= link_to_function "- Remove Product", "if(confirm('Are you sure you want to delete this product?')) $(this).up('.season').remove()" %>
          </p>            
      </div>
<% end -%>

Answer 1

这是你的罪魁祸首:

<%= season_form.collection_select :variety_id, Variety.find(:all),
  :id, :name, :prompt => "Select Variety" %>

在新记录上完美运行，因为它显示了所有内容，并且当其他选择框上的选择更改时被覆盖。

你需要做这样的事情:

<% varieties = season.product ? season.product.varieties : Variety.all %>
<%= season_form.select :variety_id, 
  options_from_collection_for_select(varieties, :id, 
  :name, season.variety_id), :prompt => "Select Variety" %>

这将仅使用链接到 season.product 的 Varieties。如果 season.product 不存在，它会列出所有这些。如果现有记录具有 variety_id，它还会自动选择正确的记录。

改变也没什么坏处。

<%= season_form.collection_select :product_id, Product.find(:all), 
  :id, :name, {:prompt => "Select Product"}, 
  {:onchange => "collectionSelected(this);"} %>

到

<%= season_form.select :product_id,  
  options_from_collection_for_select(Product.find(:all),
  :id, :name, season.product), {:prompt => "Select Product"},
  {:onchange => "collectionSelected(this);"} %>

这将在页面加载时选择合适的产品。这第二部分本质上是 Rails 方法来完成 BYK 的第一个建议。但是，考虑到提供给选择框的 onchange 方法的性质，这一行本身并不能解决问题。它只会通过突出显示与季节相关的产品来增强用户体验。