Question

我甚至不确定如何标题这一点。

我有一个页面需要添加多个选项的总和，并在选择更改时随时显示总数。所有选择都命名相同，选项的值在选项的ID中。到目前为止我尝试过的所有东西都失败了。谢谢。

示例：

    <select name="options">   
        <option ID="2.2" value="uid" selected>Option 1</option>
        <option ID="1.8" value="uid">Option 2</option>
        <option ID="3" value="uid">Option 3</option>
    </select>

    <select name="options">   
        <option ID="2.2" value="uid">Option 1</option>
        <option ID="1.8" value="uid" selected>Option 2</option>
        <option ID="3" value="uid">Option 3</option>
    </select>

    <div id="total">Total: 4</div>

Answer 1

这是jsFiddle中的函数版本：

http://jsfiddle.net/shaneblake/BBhnZ/

HTML：

<select name="options">           
    <option data-value="2.2" value="uid" selected>Option 1</option>
    <option data-value="1.8" value="uid">Option 2</option>        
    <option data-value="3" value="uid">Option 3</option>    
</select>    

<select name="options">           
    <option data-value="2.2" value="uid">Option 1</option>        
    <option data-value="1.8" value="uid" selected>Option 2</option>        
    <option data-value="3" value="uid">Option 3</option>    

</select>    

<div id="total">Total: 4</div>

JavaScript：

$(function() {
    $("select[name='options']").change(function() { updateTotal(); });
    updateTotal();
});

function updateTotal() {
    var newTotal = 0;
    $("select[name='options'] option:selected").each(function() {
        newTotal += parseFloat($(this).data('value'));
    });
    $("#total").text("Total: " + newTotal);
}

Answer 2

你可以做到

var selects = $("select[name=options]");

selects.bind("change", recalculateSelectTotals);

function recalculateSelectTotals() {
    var total = 0;
    selects.find("option:selected").each(function () {
        total += Number(this.id);
    });
    $("#total").text("Total: " + total);
}

但是，您应该使用value作为值，并为标识符保存ID。两个具有相同名称的选项也是无效标记。

Answer 3

1：ID不能以数字开头。
2：您不能拥有多个具有相同ID的项目 3：提供您选择的班级或ID，以便您可以阅读他们的值$('#selectID').val()

jquery使用重复选择计算所选选项ID的值

3 个答案: