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);
});

Answer 2

您可以放置多个由定界符分隔的值，然后使用.split()对其进行拆分。

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

进行检索。

为下拉菜单分配多个值

3 个答案: