jQuery - 一起添加多个 Select 下拉选项属性

Question

对于 2 个 select 下拉列表，我有以下 html ：

<select name="options[4614]" id="select_4614" class="required product-custom-option admin__control-select" title="" data-selector="options[4614]" aria-required="true">
<option value="">-- Please Select --</option>
<option value="18923" money="100">Option 1</option>
<option value="18924" money="200">Option 2</option>
</select>

<select name="options[2433]" id="select_2433" class="required product-custom-option admin__control-select" title="" data-selector="options[2433]" aria-required="true">
<option value="">-- Please Select --</option>
<option value="9353" money="0">Option A</option>
<option value="9351" money="100">Option B</option>
<option value="9352" money="200">Option C</option>
</select>

我正在尝试将每个选定选项的属性“金钱”中的值相加，然后 output 这是另一个 div。

我使用以下内容作为指南：

$(function () {
        var fields = $('.product-custom-option.admin__control-select').change(calculate);
        function calculate() {
            var pricesum = 0;
            fields.each(function () {
                pricesum += +$(this).val();
            })
            $('.outputdiv').html(pricesum.toFixed(2));
        }
    })

它将选项值加在一起，但是当将.val 更改为.attr('money') 时，它返回 NaN（不是数字）。

任何关于出了什么问题的指导将不胜感激。

谢谢你。

Answer 1

更改您的计算 function 如下（评论以便更好地理解）：

 $(function() { var fields = $('.product-custom-option.admin__control-select').change(calculate); function calculate() { var pricesum = 0; fields.each(function() { //this refers to select elements not options in this context //get selected option let money = +$(this.selectedOptions[0]).attr("money"); //skip not selected values if (Number(money)===money) pricesum += money; }) //console.log(pricesum) $('.outputdiv').html(pricesum.toFixed(2)); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="options[4614]" id="select_4614" class="required product-custom-option admin__control-select" title="" data-selector="options[4614]" aria-required="true"> <option value="">-- Please Select --</option> <option value="18923" money="100">Option 1</option> <option value="18924" money="200">Option 2</option> </select> <select name="options[2433]" id="select_2433" class="required product-custom-option admin__control-select" title="" data-selector="options[2433]" aria-required="true"> <option value="">-- Please Select --</option> <option value="9353" money="0">Option A</option> <option value="9351" money="100">Option B</option> <option value="9352" money="200">Option C</option> </select> <div class="outputdiv"></div>