Question

我在表格中有这个

    <%= simpleform_for @customer_bill do |f| %>
    <%= f.label :product_id %>
    <%= f.collection_select :product_id,Product.all,:id,:title, :prompt => "Select a Product", :style => 'width:150px;' %>

     <%= f.label :price %> 
    <%= f.text_field :price, :size=>20, :id =>"price", :class =>"price" %>
    <br/>
/*rest of code*/

在产品表中我有'产品名称'和'价格'。我在客户账单和产品模型之间建立了必要的联系。

选择产品后，价格应自动降低。这是最好的方法吗？ Ajax / Jquery如何继续解决问题????任何指导都会有所帮助。

Answer 1

您可以使用select-tag的data-xxx属性来存储价格并让javascript来处理它：

JavaScript的：

    $(function() {
        $('#products').change(function() {
            var product_id = $(this).val()
            var price = eval($(this).data('prices'))[product_id]
            $("#price").html(price)
        })
    })

模板（它是Haml，但我猜你即使你是ERb-guy也会得到这个想法）：

= simple_form_for ........ do |f|
    - prices = Hash[Product.all.map{|p| [p.id, p.price]}].to_json
    = f.association :product, input_html: {data:{prices: prices}, id: 'products'}
    = f.label :price, id: 'price'

请注意使用f.association代替f.collection_select。我认为在你的情况下使用起来更简单。

Answer 2

一种方法是将jQuery与ajax一起使用。您有两种选择：

您的ajax请求返回HTML代码 - ＆gt;您更改页面中的块用新价格更新它
你的ajax返回json - ＆gt;你使用javascript函数来解析json 并更新你的选择。

在轨道上的ruby中选择产品后动态选择价格

2 个答案: