CODEWITHSUNDEEP
javascripthtmljquery
PHPFromTheBack
PHPFromTheBack

Reputation: 93

Split array and add values together or subtract based on multiple selection in jquery

Multi Select dropdown So I have a multi select dropdown, which sends the value to the jquery function when a value is clicked. Values are numbered 1-5.

$("#requestedItems").on("click", function(){
  var totalDays = $('#rentalDays').val(); /*multiply days by total*/
  var selection= $('#multiSelectDropdown').val();

      var items = selection.split(',');
      var total;
  var price;
      var i;
      for (i = 0; i < items.length; i++) {
    switch(items){
    case 1: price = 180;
    break;
    case 2: price = 300;
    break;
    case 3: price = 240;
    break;
    case 4: price = 120;
    break;
    case 5: price = 210;
    break;          
    }
        total = price;
        $("#someDiv").html(total);
      }     
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="requestedItems">
  <select class="form-control" id="multiSelectDropdown" multiple>
  <option value='1'>(1) option1</option>
  <option value='2'>(2) option2</option>
  <option value='3'>(3) option3</option>
  <option value='4'>(4) option4</option>
  <option value='5'>(5) option5</option>                            
  </select>
</div>

Jquery What I want to do is grab each value from the array (ex: 1-5), give them a specified price (ex: 1 = 180, 2 = 300) and add each one together or subtract based on if the user selects it or unselects it (total = 180 + 240 + 300), (total - 240). Clicking an item will add that price to the total. Unchecking an item will subtract the value from the total. then the final total is multiplied by the totalDays. Essentially a simplified calculator. (Now I could simply just put the price values in the - option value='100'...But the numbers (1-5) are actually sent to the database. Then those values are pulled from the database and used as reference to the names of the items to display to the end user through a calendar class.) I am just kinda lost on how to build it in jquery.

I am not well versed in jquery, but prefer to do it client side as opposed to server side

Upvotes: 0

Views: 244

Answers (1)

mplungjan
mplungjan

Reputation: 178350

You mean this?

$("#multiSelectDropdown").on("change",function() {
  const values = $("option:selected",this) // the selected options
    .map(function() { return +this.dataset.value }).get(); // an array of integers that may be empty
  const sum = values.length ? values.reduce((a,b)=>a+b) : 0; // if not empty, sum the values
  console.log(sum)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="requestedItems">
  <select class="form-control" id="multiSelectDropdown" multiple>
    <option value='1' data-value="100">(1) option1</option>
    <option value='2' data-value="300">(2) option2</option>
    <option value='3' data-value="240">(3) option3</option>
    <option value='4' data-value="120">(4) option4</option>
    <option value='5' data-value="210">(5) option5</option>                          
  </select>
</div>

Upvotes: 1

Related Questions