Javascript 选择类别，然后显示Category.size

您好，我有一个创建产品的表单。用户应能够选择类别（例如T恤），然后应下拉T恤的所有尺寸（例如S、M、L）。用户可以输入每种尺寸的数量

Javascript不适用于此。用户可以选择类别，但大小不会下拉。有人知道为什么吗？我知道Rails，但不知道JS。

当我检查视图时，我可以在HTML中看到大小在那里

这是我的看法

<%= javascript_include_tag "custom" %>
<div class="container">
  <div class=“row”>
    <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-primary">
        <div class="panel-body">
          <%= simple_form_for @product_form, as: :product_form, url: products_path do |f| %>
            <%= f.collection_select :category_id, @categories, :id, :name, include_blank: true, :prompt => "Select One Category" %>
            <% @categories.each do |category| %>
              <div class='sizes_container' id ='sizes_container_for_<%= category.id %>'>
                <% category.sizes.each do |size| %>
                  <%= f.hidden_field :size_id, value: size.id %>
                  <%= size.title %>
                  <%= f.input :quantity %>
                <% end %>
              </div>
            <% end %>
            <%= f.input :title, label:"Title"%>
            <%= f.input :price, label:"Price"%>
            <%= f.input :description,label:"Description" %>
            <%= f.input :tag_list,label:"Tags - Seperate tags using comma ','. 5 tags allowed per product" %>
            <%= f.button :submit, "Create new product", class: "btn-lg btn-success" %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

---

首先，在视图中包含自定义javascript是一个不好的迹象：

<%= javascript_include_tag "custom" %>

我还认为为它创建一个类有点过分。您最好按照上面的方式将代码放入函数中

--

考虑到您的HTML是正确的，上述内容应该可以工作。另一个重要的注意事项是，在Rails中，您应该始终以某种方式绑定到DOM加载事件：

$(document).ready(function(){
$(document).on("page:load" ...

这主要是

Turbolinks

的一个问题，但也是比仅使用

$（函数…

更好的做法

#app/views/layouts/application.html.erb
<%= javascript_include_tag :application, :custom %>

#app/assets/javascripts/application.js
$('document').on('change', 'select#product_category_id', function(e){
    var id = $(this).val();
    $('.sizes_container').hide();
    $('#sizes_container_for_' + id).show();
});

$(document).ready(function(){
$(document).on("page:load" ...