将select2中的选项值相加

Question

Basically, I am using Select2 (a library in jquery) to create a dropdownlist.基本上，我使用 Select2（jquery 中的一个库）来创建一个下拉列表。 I am trying to figure out, how to add up the values of each selected option by the user.我试图弄清楚，如何将用户选择的每个选项的值相加。

This is the code:这是代码：

<!DOCTYPE html>
  <html>
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
       </script> 
  
         <!--These jQuery libraries for chosen need to be included-->
         <script src= "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"> 
        </script> 
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"/> 
  
        <!--These jQuery libraries for select2  
            need to be included-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"> 
       </script> 
        <link rel="stylesheet" 
              href= "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" /> 
        <script>
        $(document).ready(function () { 
               //Select2 
                $(".country").select2({ 
                    maximumSelectionLength: 2,  
                }); 
                //Chosen 
                $(".meals").chosen({ 
                    max_selected_options: 10, 
                }); 
            }); 
        </script> 
  </head>
  <body>

    
  <form> 
        <h2>Calculate Fruit and Vegatables Calories</h2> 
        <select class="meals" multiple="true" style="width: 200px;" id="meals"> 
        <option value="60">Apples</option> 
        <option value="70">Oranges</option> 
        <option value="65">Bananas</option>
        <option value="72">Carrots</option>
        <option value="69">Tomatoes</option>

      </select>
        <button id="button" onclick="Addingvalues()">Calculate!</button>
    </form> 

  <script src="script.js"></script>
  </body>
</html>

The object of the code is to sum up the total calories of the food items selected by using some js and jquery.代码的object是用一些js和jquery来总结选择的食物的总热量。

How can I create a function that sums the total values of the selected options?如何创建一个对所选选项的总值求和的 function？

Thanks in advance!提前致谢！

Answer 1

you can do it like this你可以这样做

const Addingvalues = () => {
  const options = document.getElementById("meals").options;
  let sum = 0;
  for (let i = 0; i < options.length; i++) {
    if (options[i].selected) {
      sum += parseInt(options[i].value, 10);
    }
  }
}

将select2中的选项值相加

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-29 16:52:52

将select2中的选项值相加

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-29 16:52:52

解决方案1
1 已采纳 2020-11-29 16:52:52