jQuery : Sum multiple select value if only selected

Question

How can I sum the value of selected multiple item if only the item is selected. From the example I wanna get the value of "X12SO+X13SO=30"

let sum = 0;
$("select[name='myselect[]'] option").each(function(){
  sum += +this.value.split("|")[1];
});
$("input[name='myresult']").val(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <select multiple class="form-control" id="multipleSelect" name="myselect[]">
<option value="X12SO|10">X12SO</option>
<option value="X13SO|20">X13SO</option>
<option value="X14SO|30">X14SO</option>
<option value="X15SO|40">X15SO</option>
<option value="X16SO|50">X16SO</option>
</select>

<input type="text" name="myresult">

Hikarunomemory · Accepted Answer · 2018-08-14 01:40:26Z

1

Use onchange to detect if the selected options changed.

let sum = 0;
$("#multipleSelect").on("change", function(){
  sum = 0;
  // if there are no options being selected, it would be an empty array[]
  // and sum each splited value
  ($(this).val() || []).map(v=>sum += +v.split("|")[1])
  $("input").val(sum);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <select multiple class="form-control" id="multipleSelect" name="myselect[]">
<option value="X12SO|10">X12SO</option>
<option value="X13SO|20">X13SO</option>
<option value="X14SO|30">X14SO</option>
<option value="X15SO|40">X15SO</option>
<option value="X16SO|50">X16SO</option>
</select>

<input type="text" name="myresult">

answered Aug 14, 2018 at 1:40

Hikarunomemory

4,3052 gold badges13 silver badges23 bronze badges

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

2 Comments

jvk Over a year ago

@Hikarunmemory, what is v in map

Hikarunomemory Over a year ago

@whoami, each value of the selected options. If you select X12SO, v would be X12SO|10.

Collectives™ on Stack Overflow

jQuery : Sum multiple select value if only selected

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related