时间戳

首页 > 解决方案 > Rails 使用 javascript - 通过更改下拉值更改其 text_field 值，然后它会自动计算

javascript - Rails 使用 javascript - 通过更改下拉值更改其 text_field 值，然后它会自动计算

问题描述

我遇到了一个问题。我有一个名为 product 的下拉框。我想通过选择产品项目来更改产品价格（隐藏字段）然后通过输入产品数量（文本字段）来计算该产品的总价格（文本字段）

这是我的视图文件看起来像

<%= form_for @product_fills, url: product_fills_path , method: :post do |f| %>
    <div class="col-xs-4 col-sm-2">
      <div class="form-group has-feedback">
        <%= f.collection_select(:product_id, @products,:id,:name , {include_blank: '-- Active Nozzle --'}, {class:'form-control', id: 'product_select' }) %>
      </div>
    </div>
    <div class="col-xs-4 col-sm-2">
      <div class="form-group has-feedback">
        <%= hidden_field_tag 'price' , id: 'prices'  %>         
        <%= f.text_field :quantity ,   class:'form-control', placeholder: 'Quantity', id: 'quantity' %>
      </div>
    </div>

    <div class="col-xs-4 col-sm-2">
      <div class="form-group has-feedback">
        <%= f.text_field :amount , required: true, autocomplete: 'off', class:'form-control', placeholder: 'Amount', id: 'total_price' %>
      </div>
    </div>

<% end %>

这是我的javascript代码

<script>

  $(document).ready(function() {

      var price =  <%= @price %>
// Change value by changing drop down vlaues
      $("#product_select option").filter(function() {
        if $(this).val(<% @products %>) == $("#prices").val(price){
            return $("#product_select").val()
          }
        }      
      $("#product_select").on("change", function() {
          $("#prices").val(price);
      });


// Calculation
    $('#quantity').on('keyup', function(e) {
      var quantity = $(this).val();
      $('#total_price').val((price * quantity).toFixed(2));
    });

  });

</script>

我的控制器看起来像这样

def new

   @products = Product.where(id: @product_ids, active: true )
   @products.each do |product|
      puts "Product_PRICE: #{product.product_price}"
      @price = product.product_price
    end

end

这里的计算功能工作正常（它采用一个价格值），但是我想要通过更改产品项目值在产品下拉框中有很多值，它应该计算适当的总产品价格。

标签： javascriptruby-on-rails

解决方案

您的 jQuery 语法有一些错字，

1 => 数量字段应该是数字类型，仍然需要将此值解析为整数parseInt()

2 => pice 也应该用parseFloat()

3=> 不确定 $("#product_select option").filter(function() {...})，它还包含一些错字。

将选择标签更改为

   <%= f.select :product_id, options_for_select(@products.map{ |p| [p.name, p.id, {'data-price'=>p.product_price}] }), :include_blank => '-- Active Nozzle --', class: 'form-control', id: 'product_select'%>

脚本定制

<script>

  $(document).ready(function() {

      //var price =  "<%= @price %>";
     // Change value by changing drop down vlaues
      //$("#product_select option").filter(function() {
        //if($(this).val(<% @products %>) == $("#prices").val(price)){
            //return $("#product_select").val()
          //}
        //}      
      $("#product_select").change(function() {
        var price  = $(this).data("price");
        $("#prices").val(price);
      });


    // Calculation
    $('#quantity').on('keyup', function(e) {
      var price = parseFloat($("#prices").val());
      var quantity = parseInt($(this).val());
      $('#total_price').val((price * quantity).toFixed(2));
    });

  });

</script>

请测试它，它应该工作。

推荐阅读