jquery - 使用 Rails 和 jquery 进行动态选择

Question

我有一个购物车应用程序，您可以在其中从目录中选择产品。我想通过 ajax 动态填充一些列，例如基于选择的可用颜色。

这是我在添加新项目时的 View

<td><%= f.collection_select(:product_id, Product.active.all, :id, :name, :prompt => 'Select Product') %></td>
<td><%= f.text_field :quantity, :size => 6 %></td>
<td><%= f.collection_select(:color_id, Color.all, :id, :name, :prompt => 'Select Color') %></td>
<td><%= f.text_field :price, :size => 8 %></td>
<td><%= f.link_to_remove "remove" %></td>

我想根据product_id值设置价格和颜色选项。这是我到目前为止所拥有的:

$('select#order_items_new').change(function() {
    // How to retrieve table columns based on product_id value?
});

Answer 1

我希望能够准确理解您的挑战。一旦选择了产品，颜色选择将通过 ajax 显示以及价格。

这是产品选择。

<%= form_tag "some_form" do |f|  %>
  Choose a product:
  <%= select_tag "product_id", options_for_select( @products.collect { |p| [p.name, p.id]} ), :include_blank => true  %>
  <br>
  <div id="colors_select"></div>
<% end %>

当产品选择更改时，ajax 会触发并检索产品颜色和价格。

$(document).ready(function() {
  $("#product_id").live("change", function() {
    $.ajax({
      url: '/get_colors',
      data: {
        product_id: $(this).val();
      },
      cache: false,
      success: function(html) {
        $("#colors_select").html(html);
      }
    });
  });
});

不要忘记包含返回颜色的方法的路由。

App::Application.routes.draw do
  match 'get_colors' => 'colors#get_colors'

一个简单的方法，返回带有颜色和价格的部分。设置关联后，您可以通过以下方式获取特定产品的颜色:Product.find(params[:product_id]).colors

class ColorsController < ApplicationController

  def get_colors
    @colors = Color.all
    @price = Product.find(params[:product_id]).price
    render :partial => 'get_colors'
  end