使用 jquery 对表单中的一系列输入和选择字段进行求和和相乘

Question

我有一个表单，其中有多个输入和选择字段。我需要将每个相应选择字段的值与输入字段相乘，然后将其全部相加。 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，但不适用于任何其他浏览器。

Answer 1

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

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

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

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