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

我甚至不知道该怎么称呼它

我有一个页面，需要添加多个选择的总数，并在选择更改时显示总数。所有选择的名称相同，选项的值位于选项的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>

---

1:ID不能以数字开头。 2:不能有多个具有相同ID的项目 3：给出select的类或ID，以便您可以读取它们的值$'selectID'。val

您可以这样做

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作为标识符。两个同名的选择也是无效的标记。

这里是JSFIDLE中的函数版本：

HTML:

---

存储数据是数据属性的作用。id属性用于标识元素，这意味着它们必须是唯一的。让多个元素具有相同的id是不好的做法。在这种情况下，我只需要使用选项值或选项文本以外的内容。最后，我只是将一个逗号分隔的UID列表传递给后端。@renhack为什么不将价格放在值属性中，而放弃id属性？如果有多个元素具有相同的ID和/或存在以数字开头的ID，某些浏览器可能会中断。我无法触摸该值。这是将逗号分隔的UID列表传递给后端。我只是想给继承下来的应用程序增加一些可用性。我无法访问后端的逻辑。如果有其他方法不触及数值，我洗耳恭听。我认为数字3是不必要的。他最好使用一个类或只是标记名，因为有不止一个select元素可以从中读取值。哈。口是心非。这是完美的谢恩。我没有意识到在没有使用jquery的html5支持的情况下，我可以使用data属性。我很蠢，把密码写在你的答案里。如果JSFIDLE停止运行，则此答案将无效。而不是：.changefunction{updateTotal；}；，只需这样做：.changeupdateTotal；感谢您的编辑@Šime Vidas。。。我一直忙于实际工作；

<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>

$(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);
}