array is adding the first selected item's value plus the new one with it

I have a Bootstrap drown down that outputs data dynamically with values of 1-9.

I am attempting to grab the data of the selected dropdown item each time one is selected and push it to an array.

The issue is: let's say the first selected item in the drop down has a value of 5, then the code I have now looks like this:

[['5']]

When selecting a second option, it then looks like this:

[['5'], ['5', '6']]

Why is it adding the value of the first and the second option selected?

var destinationVal = []

$('.col-location .selectpicker').on('change', function () {
    var selectedVals = $(this).val();
    destinationVal.push(selectedVals)
    console.log(destinationVal)
}

If I understand your problem correctly:

1. When the event is firing, it's pushing the new value to the array destinationVal
2. The second time you change the selection, you push the second value while keeping the first value in the array.

Instead, you can save the selected value in a variable instead of an array. Or clear the array before adding the new value.

So it will be:

var destinationVal

$('.col-location .selectpicker').on('change', function () {
  var selectedVals = $(this).val();
  destinationVal = selectedVals;
  console.log(destinationVal)
}