计算多个 select 下拉列表

Question

我有多个 selection 菜单，如下所示：

<select style="width:345px;" multiple="multiple" id="syndicate_group">
    <option data-cost="10" value="groupNo114">Starter</option>
    <option data-cost="15" value="groupNo100">Bronze</option>
    <option data-cost="25" value="groupNo104">Silver</option>
    <option data-cost="34" value="groupNo108">Gold</option>
    <option data-cost="0" value="groupNo115">Other</option>
</select>

<input type="number" placeholder="" value="" name="ammountToPay" id="ammountToPayField">

我想根据 data-cost 而不是用户 selection 的值进行计算，所以如果用户 selects Starter 和 Bronze，'ammountToPayField' 的 id 中的值将是 25，但是如果他们决定只想要铜牌，则 [= 中的值22=] 只会是 15，但找了一段时间我只能找到输入字段，而不是多个 select 字段。

Answer 1

试试这个：

$('#syndicate_group').change(function() {
    var sum = $(this).find(':checked')
                     .map(function() { return parseInt($(this).data('cost'), 10); })
                     .get()
                     .reduce(function(x, y) { return x + y; });

    $('#ammountToPayField').val(sum);
});

见Fiddle

Answer 2

试试这个：

$("#syndicate_group").change(function () {
var sum = 0;
$("select option:selected").each(function() {
  sum += parseInt($(this).text());
});
$( "#ammountToPayField" ).text( sum ); }).change();

计算多个 select 下拉列表

Calculate multiple select dropdown

math

jquery

multiple-select