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>

来源

2011-06-14 renhack

存储数据是什么'数据'属性。 'id'属性用于标识元素，这意味着它们必须是唯一的。 – lonesomeday 2011-06-14 18:57:21

这是不好的做法，有多个元素具有相同的ID – Mutt 2011-06-14 18:58:21

在这种情况下，我只需要使用选项的值或选项的文本以外的东西。最后，我只是将逗号分隔的UID列表传递给后端。 – renhack 2011-06-14 19:00:48

下面是一个的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); 
}

来源

2011-06-14 19:12:13 ShaneBlake

的帮助。这是完美的谢恩。我没有意识到我可以使用数据属性没有HTML5支持使用jQuery。我的愚蠢。 – renhack 2011-06-14 19:15:21

我已经添加了您的价值属性，因为您拥有它们并更新了它... – ShaneBlake 2011-06-14 19:17:04

将代码发布到您的答案中。（如果jsFiddle失效，这个答案变得没用。） – 2011-06-14 19:28:04

1：ID的不能以数字开头。
2：你不能用相同的ID
3多个项目：给你选择的类或ID的，所以你可以阅读他们的价值观$('#selectID').val()

来源

2011-06-14 18:59:26 Neal

我认为3号是不必要的。因为有多个select元素可以从中读取值，所以最好使用类或标签名称。 – Andre 2011-06-14 19:06:28

你可以做

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

来源

2011-06-14 18:59:49 Magnar

感谢您对Magnar – renhack 2011-06-14 19:23:46

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

回答

相关问题