How do I add multiple select options

Question

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>

You have a div with class form. Then the closing tag is a form tag. Then you use change eventListener on the div.form ? To add to the confusion you have this How do I add rounds 1, 2,3 on click rounds or rounds and display on id="total"? . I mean, i personally don't understand what you actually want to do. — Mihai T
– Mihai T, Commented Jul 1, 2021 at 8:12
I have updated what I actually want, div.form is used in document.querySelector('.form').addEventListener('change', function() to fire instant change. — Dominic
– Dominic, Commented Jul 1, 2021 at 8:48

guyaloni · Accepted Answer · 2021-07-01 08:59:17Z

1

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>

edited Jul 1, 2021 at 8:59

answered Jul 1, 2021 at 8:51

guyaloni

6,0206 gold badges63 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dominic Over a year ago

Thanks for the answer, but I wanted to add values in rounds lets say Round 1 has value 1 and Round 5 has value 5; the result should be 6;

guyaloni Over a year ago

Just modified code to what you are looking for

RenaudC5 · Accepted Answer · 2021-07-01 09:17:50Z

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

Muhammad Bilal · Accepted Answer · 2021-07-01 08:52:15Z

0

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>

answered Jul 1, 2021 at 8:52

Muhammad Bilal

1185 bronze badges

Collectives™ on Stack Overflow

How do I add multiple select options

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related