javascript - 为下拉选项分配多个值

Question

我想将多个值分配给一个下拉选项，然后将其汇总到一个文本字段中。

例如，我可能有三个下拉项:开胃菜、主菜、配菜。我可能有两个结果字段:卡路里和成本。这意味着，如果有人从开胃菜下拉列表中选择“沙拉”，则“沙拉”需要具有与其相关的成本和卡路里值。所述值还需要对主菜和副菜下拉菜单中的卡路里和成本值进行求和。

根据网站上的另一个答案，我首先使用以下代码对多个下拉列表中的值进行求和:http://jsfiddle.net/sf1hwp2y/

HTML:

<select name='anch1'>
 <option value='0'>Appetizer</option>
 <option value='20'>Option 1</option>
 <option value='30'>Option 2</option>
 <option value='40'>Option 3</option>
</select>

<select name='anch2'>
 <option value='0'>Entree</option>
 <option value='20'>Option 1</option>
 <option value='30'>Option 2</option>
 <option value='40'>Option 3</option>
</select>

<select name='anch3'>
 <option value='0'>Side</option>
 <option value='20'>Option 1</option>
 <option value='30'>Option 2</option>
 <option value='40'>Option 3</option>
</select>

<div id='sum'>Calorie Total</div>

Javascript + JQuery:

$('select').change(function(){
    var sum = 0;
    $('select :selected').each(function() {
        sum += Number($(this).val());
    });
     $("#sum").html(sum);
});

我不确定如何将价格或其他属性分配给下拉选项。有什么想法吗？

Answer 1

您可能可以在

上使用 data- 属性

类似这样的事情:

<select name="anch1">
    <option value="0">Appetizer</option>
    <option value="20" data-cost="5">Option 1</option>
    <option value="30" data-cost="10">Option 2</option>
    <option value="40" data-cost="20">Option 3</option>
    <option value="50" data-cost="50">Option 4</option>
</select>

然后，用你的 JS:

$('select').on('change', function(){
    var sum = 0;
    var cost = 0;

    $('select :selected').each(function() {
        sum += Number($(this).val());
        cost += Number($(this).data('cost'));
    });
    $('#sum').html(sum);
    $('#cost').html(cost);
});