Search code examples
javascripthtmljqueryjquery-select2jquery-select2-4

Adding up the values of options in select2

Basically, I am using Select2 (a library in jquery) to create a dropdownlist. 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.

How can I create a function that sums the total values of the selected options?

Thanks in advance!

Solution

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