为下拉菜单分配多个值

Question

I'm wanting to assign multiple values to one dropdown selection which are then summed in a text field.

So for example, I might have three drop-down items: Appetizer, Entree, Side. I might have two resulting fields: Calories and Cost. This means that if someone selects "Salad" from the appetizer dropdown, "Salad" needs to have both a cost and calorie value associated with it. Said value will also need to sum whatever the calorie and cost values from the entree and side dropdowns are.

Per another answer on the site, I started out with the following code to sum values from multiple dropdowns: 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);
});

I am unsure how to also assign prices or other attributes to the dropdown selections. Any ideas?

Answer 1

You can probably use data- attributes on the

Something like this:

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

Then, with your 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);
});

Answer 2

You can put multiple values separated by a delimiter, then use .split() to split it up.

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

$('select').change(function(){
    var total_calories = 0;
    var total_price = 0;
    $('select').each(function() {
        let [calories, price] = $(this).val().split(",");
        total_calories += parseInt(calories);
        total_price += parseFloat(price);
    });
    $("#calories").text(total_calories);
    $("#price").text(total_price);
});

Answer 3

只需添加选项属性，例如data-price='123' ，然后使用$(this).attr('data-price')进行检索