How to get all selected dropdown values for a particular Id using Jquery

Question

I have a form with multiple select dropdown menus that start with the id: package which are added dynamically by the user. My goal is to put all the selected values from these select dropdowns into an array. Here is the code I have so far.

$(document).ready(function() {

    arr = new Array();

    $(document).on('change', 'select[id ^="package"]', function() {
        arr.push($(this).val());
        alert(arr.join('\n')); //for testing
    });

});

Currently all I am doing is pushing the selected values onto the array rather than setting the values for a specific index. Therefore if I keep switching the value for a specific select , I will keep pushing values onto the array. How can I determine which selector I am currently in so I can get an index into the array to modify the array accordingly?

Answer 1

is this what you're looking for?

$(document).on('change', 'select[id ^="package"]', function() {
     $(this).find('option:selected').each(function(i){
           arr[i] = $(this).val();
     });
});

Answer 2

you can use jQuery map() method:

translate all items in an array or object to new array of items.

$(document).on('change', 'select[id ^="package"]', function() {
    var arr = $('select[id ^="package"]').map(function(){
       return this.id + " " + this.value
    })
});

DEMO