Javascript 在“选择标签”上加载数据选择

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

在OrderItem模型中有product_id列。当用户创建一个订单并添加一个新的订单项目时，我想让他首先在select_标签中选择产品类别，然后在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函数来根据所选类别加载数据。我不确定我是否需要在orders_controller中写入def，或者我可以在orders.coffee as中写入def，该功能在select from product_category_id标签上调用

你能告诉我正确的路吗

---

谢谢你的帮助

我将编写一个控制器方法，根据产品类别返回正确的产品ID和名称，并通过js创建正确的选项。如果你有很多类别，有很多不同的产品ID，因此应该很好地扩展，这是有意义的

控制器 这将返回以下形式的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'

我认为你有资源：在你的路线中的某个地方有订单，但为了简单起见，我现在只是创建了这样的路线-你可以为你的路线修改它

咖啡 要获取此json，可以使用jquery：

要不具有静态类别id，只需收听类别选择器的更改事件：

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()

最后，您必须使用返回的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()

如果rails真的生成了这个名称，请仔细检查jquery选择器，以防出现问题，但这应该会给您一个很好的开始，让您可以根据自己的需要来实现和优化它

这是从head打印出来的，希望没有打字错误

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()

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()