在 "select_tag" select 加载数据

Question

我有标准的电子商务模型：ProductCategory、Product、Order 和 OrderItem

在 OrderItem 模型中有 product_id 列。当用户创建订单并添加新订单项目时，我想让他先选择产品类别（在 select_tag 中），然后加载 f.collection_select :product_id 仅来自该类别的产品。

现在我的 _order_item_fields.html.haml 看起来像这样：

.form-group
  = label_tag 'product_category_id', 'Category'
  = select_tag 'product_category_id', options_for_select(ProductCategory.all, 'id', 'name')

.form-group
  = f.label :product_id, 'Product'
  = f.collection_select :product_id, {# now it's empty}, :id, :name, {prompt: 'Choose category first'}

所以，我需要编写一些 JS 函数来加载数据，基于 selected 类别。我不确定我是否需要在 orders_controller 中编写 def 或者我可以在 orders.coffee 中作为从 product_category_id 标签在 select 上调用的函数来做。

你能告诉我正确的路径吗？

感谢您的帮助！

Answer 1

我会编写一个控制器方法 return 根据产品类别输入正确的产品 ID 和名称，并通过 js 创建正确的选项。如果您有很多具有很多不同产品 ID 的类别，那么这很有意义，因此应该很好地扩展。

控制器

# OrdersController

def product_options
  category_id = params[:category_id]

  render json: {
    products: ProductCategory.find(category_id).products.pluck(:id, :name)
  }
end

这将 return json 的形式如下：

{
  products: [
    [5, 'name of product with id 5'],
    [12, 'name of product with id 12'],
    ...
  ]
}

路由

然后您必须为此添加一个路由条目：

# Routes
get '/route/to/product_options/:category_id', to: 'orders#product_options'

^{我认为您的路线中某处有 resources :orders，但为了简洁起见，我现在简单地创建了这样的路线 - 您可以为您的路线修改它！}

咖啡

要获得此 json，您可以使用 jquery:

# orders.coffee

category_id = 5
$.get("/route/to/product_options/#{category_id}")

要没有静态 category_id，只需监听类别选择器的 change 事件：

load_new_category = (category_id) ->
  $.get("/route/to/product_options/#{category_id}")

$ -> # wait until page is loaded completely 
  $('[name="product_category_id"]').on 'change', ->
    load_new_category $(@).val()

最后，您必须使用 returned json 来构建您的选项：

set_product_options = (products_json) ->
  options_html = ''

  for product_array in products_json.products
    id = product_array[0]
    name = product_array[1]

    options_html += "<option value='#{id}'>#{name}</option>"

  $('[name="product_id"]').html options_html

load_new_category = (category_id) ->
  # attach it to `set_product_options` with `.done()`
  $.get("/route/to/product_options/#{category_id}").done set_product_options

$ ->
  $('[name="product_category_id"]').on 'change', ->
    load_new_category $(@).val()

请仔细检查 jquery 选择器以防出现问题（如果 rails 确实生成了这个名称），但这应该会给您一个良好的开端来根据您的需要实施和优化它。

_{（从头打出来的，希望没有错别字。）}

在 "select_tag" select 加载数据

Load data on "select_tag" select

javascript

ruby-on-rails-4

collection-select

控制器

路由

咖啡