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>

我一直在使用像这样的东西

  $('#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常见问题解答中的here（基本上，它表示使用select.val()）。

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

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

使用jquery对表单中的输入和选择字段进行求和

1 个答案: