代码之家 › 专栏 › 技术社区 › Bharat Mane

Rails使用javascript-通过更改下拉值更改其文本字段值,然后自动计算

ruby-on-rails javascript

Bharat Mane · 技术社区 · 6 年前

有一个问题让我结巴。我有一个名为product的下拉框。我想通过选择产品项目来改变产品价格(隐藏字段) 然后通过输入产品数量(文本字段),shuold计算该产品的总价格(文本字段)。

这是我的视图文件

<%= 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

这里的计算功能运行良好(取一个价格值)。但是我在产品下拉框中有这么多的值,我想通过改变产品的项目值来计算产品的总价格。

2 回复 | 直到 6 年前

Anand 6 年前

您的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>

请测试一下,应该可以用的。

Bharat Mane 6 年前

我通过传递下拉列表(product)和文本字段(price)的数组值解决了这个问题。通过改变下拉项值的选择指标,价格指标值也随之改变。

这里我的jquery看起来像

    <script>
          $(document).ready(function() {
              var price =  <%= @price.compact! %>
        // Change values by changing drop down vlaues
            $(".product_select").on("change", function() {
              var id = this.selectedIndex - 1
              $(".prices").val(price[id]);
              var selectedPrice = price[id];
        // Calculation
                $('#quantity').on('keyup', function(e) {
                  var quantity = $(this).val();
                  $('#total_price').val((selectedPrice * quantity).toFixed(2));
                });
             });
          });

   </script>

在控制器中更改

 def new
    @product_ids = []
    @price = []

    @products = Product.where(id: @product_ids, active: true )
    @products.each do |product|
      @price[product.id] = product.product_price
    end
 end