使用 jquery 对一系列输入和选择字段进行求和和乘法答案

【问题标题】：sum and multiply series of input and select fields in form with jquery使用 jquery 对一系列输入和选择字段进行求和和乘法
【发布时间】：2011-03-22 10:28:14
【问题描述】：

我有一个包含多个输入和选择字段的表单。我需要将每个相应选择字段的值与输入字段相乘并将其全部加起来。 sel1*inp2 + sel2*inp2+....

<form id="myForm" >
   <select id="sel1" >
       <option value="1" >1</option>
       <option value="1" >2</option>
       <option value="1" >3</option>
       <option value="1" >4</option>
    </select>
    <input type="hidden" value="200" id="inp1"/>
   <select id="sel2" >
       <option value="1" >1</option>
       <option value="1" >2</option>
       <option value="1" >3</option>
       <option value="1" >4</option>
    </select>
    <input type="hidden" value="300" id="inp2"/>
   <select id="sel3" >
       <option value="1" >1</option>
       <option value="1" >2</option>
       <option value="1" >3</option>
       <option value="1" >4</option>
    </select>
    <input type="hidden" value="600" id="inp3"/>
    <input type="text" id="total" name="sum"/>
  </form>

我一直在用这样的sometnihg

  $('#myForm select').each(
    function(i){                
        $(this).attr('id','kol'+i);
        $(this).change( function(){
             var total = parseFloat(0);
             $('#myForm select').each(
                 function(j){ 
                total +=  parseFloat(this.value) * parseFloat($('#myForm :hidden').eq(j+1).val());
                 }
            );
        $("#total").attr("value",total);
        });
    }
);

这适用于 Firefox，但不适用于任何其他浏览器。

【问题讨论】：

标签： javascript jquery forms select sum

【解决方案1】：

在选择元素上使用this.value 在浏览器中不一致。你最好使用jQuery的方法从select元素中提取值。

有关详细信息，请参阅 jQuery FAQ 中的here（基本上，它说使用select.val()）。

其次，为什么要更改选择的 id 而不是直接在 html 中分配它们？跨浏览器的 ID 更改也不一致，可能会影响从 dom 访问元素的方式。我看不出你从中得到了什么。

最后，如果性能很重要，那么不要使用('#narudzba :hidden').eq(j+1) 来获取隐藏值。由于这些隐藏字段的 id 末尾有一个数字，因此您可以轻松地直接访问它们（您有参数 j 并且您知道您正在处理哪个选择）。另一种方法是使用jQuery.next() 并简单地导航到隐藏字段。

【讨论】：