Question

我有一个包含多个选择下拉菜单的表单。即。

Item 1: 
<select name="premier1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br />
Item 2:
<select name="premier2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br />
Item 3: 
<select name="premier3">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

基本上我想要做的是使用jQuery将所有首映下拉菜单的值一起添加，并在页面的某个位置提供另一个<div>标记的总数。

Answer 1

如果您指的是所选值，则可以使用attribute-starts-with-selector^[docs]获取以“premier”开头的<select>元素：

var total = 0;

$('select[name^="premier"]').val(function(i,val){total += +val; return val;});

alert( total );

...然后将函数直接传递给val()^[docs]方法，该方法为您提供val参数中每个所选选项的当前值。

在函数内部，它使用一元+运算符将其从字符串转换为数字，并将其添加到总数中。

编辑：好像返回undefined会清除该值。这似乎与API的其他部分不一致，我非常确定返回undefined没有效果。

我通过return val;修复了它。

示例： http://jsfiddle.net/ssyyX/

Answer 2

var total = 0;
$('select[name^="premier"]').val(function(i,e){ total += +e; });

Answer 3

你可以使用javascript本身。像this

这样的东西

使用getElementByI而不是使用getElementById。获取所有值并添加它们。

Answer 4

var total;

$('select').each(function(){
    total += parseInt($(this).val(), 10);
});

$('#total_display').text(total);

使变量保持总计
浏览每个select并将其值添加到总计
显示其他区域的总数

Answer 5

The ~~only~~ assumed working solution。：）

var total = 0;
$('select[name^="premier"]').each(function(){ 
    total += +this.value; 
});
$('#total_holder span').text(total);

使用jQuery添加多个<select> Box的值</select>

5 个答案: