CODEWITHSUNDEEP
javascripthtml
Dominic
Dominic

Reputation: 341

How do I add multiple select options

How do I add rounds 1, 2,3 on multiple select options i.e. Round 1 + Round 5 as selected on the image below, and display on id="total" which will be 6? I have tried but not getting the idea.

HTML form

<div class="form row">

<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
    <option value="1">Round 1</option>
    <option value="2">Round 2</option>
    <option value="3">Round 3</option>
    <option value="4">Round 4</option>
    <option value="5">Round 5</option>
    <option value="6">Round 6</option>
    <option value="7">Round 7</option>
    <option value="8">Round 8</option>
    <option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text"> 
</div>

Script

<script>
   document.querySelector('.form').addEventListener('change', function() {
    const nr = +document.getElementById('no_of_rounds').value || 0;
    var round_1 = 80;
    var round_2 = 90;
    var round_3 = 100;
    var round_4 = 110;
 
    document.getElementById('total').value = total;
  }


}
$('select').selectpicker();
</script>

enter image description here

Upvotes: 2

Views: 437

Answers (3)

RenaudC5
RenaudC5

Reputation: 3829

Here is a version pure JS that works well :

const no_of_rounds = document.querySelector("#no_of_rounds")

//listening to changes
no_of_rounds.addEventListener('change',(event) => {
  
  //getting all checked values
  const valuesSelected = no_of_rounds.selectedOptions
  
  //summing up all the values
  const sum = Array.from(valuesSelected).map(({ value }) => parseInt(value)).reduce((a, b) => a + b, 0);
  
  //changing the value
  document.querySelector("#total").value = sum

})
<div class="form row">

<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
    <option value="1">Round 1</option>
    <option value="2">Round 2</option>
    <option value="3">Round 3</option>
    <option value="4">Round 4</option>
    <option value="5">Round 5</option>
    <option value="6">Round 6</option>
    <option value="7">Round 7</option>
    <option value="8">Round 8</option>
    <option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text"> 
</div>

for the row const sum = Array.from(valuesSelected).map(({ value }) => parseInt(value)).reduce((a, b) => a + b, 0); what i'm doing is :

Getting all the values with const valuesSelected = no_of_rounds.selectedOptions

Changing the type to an array to manipulate it : Array.from(valuesSelected)

Mapping the values to get only values and parsing these to Integers : map(({ value }) => parseInt(value))

Summing the values to get the total : reduce((a, b) => a + b, 0);

Upvotes: 1

guyaloni
guyaloni

Reputation: 5862

I think that this is what you are looking for:

document.querySelector('.form').addEventListener('change', function() {
  let selectedValues = $('#no_of_rounds').val();
  
  let sum = 0;
  $("#no_of_rounds option:selected").each(function () {
    let $this = $(this);
    if ($this.length) {
      sum += parseInt($this.val());
    }
  });
  document.getElementById('total').value = sum;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form row">

<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
    <option value="1">Round 1</option>
    <option value="2">Round 2</option>
    <option value="3">Round 3</option>
    <option value="4">Round 4</option>
    <option value="5">Round 5</option>
    <option value="6">Round 6</option>
    <option value="7">Round 7</option>
    <option value="8">Round 8</option>
    <option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text"> 
</div>

Upvotes: 1

Muhammad Bilal
Muhammad Bilal

Reputation: 118

You Have to declare global scope variable and add the value accordingly. Like this.

<script>
   var totalValue = 0;
   document.querySelector('.form').addEventListener('change', function() {
    totalValue = totalValue + (document.getElementById('no_of_rounds').value || 0);
    var round_1 = 80;
    var round_2 = 90;
    var round_3 = 100;
    var round_4 = 110;
 
    document.getElementById('total').value = totalValue;
  }


}
$('select').selectpicker();
</script>

Upvotes: 0

Related Questions