How to push values from a multiple select dropdown to an array?

Question

I am trying to push values into an array from a multiple select dropdown box. I am able to do that but what happens is that they are not pushed into the array in the order i set it up to via splice. It is added in the order it is set up on the select box. For example if i select the options in the order of [467, 341, 344, 657, 677], my array shows [344, 467, 677, 341, 657]. I want the array to show in order I have selected the options. This is my code:

<select multiple class="yo">
    <option value = "344">opt1</option>
    <option value = "467">opt2</option>
    <option value = "677">opt3</option>
    <option value = "341">opt1</option>
    <option value = "657">opt1</option>
</select>

var optVal = new Array();
        var tArray;
        $('.yo').each(function() {
            var newS = $(this).val(); 
            tArray = newS;
            optVal.splice(0, 0, tArray);

        });

Please help!

Here is my Fiddle: https://jsfiddle.net/rprakash/e1xcd2gh/

Why not just use .push()? It seems like you are using an event handler, please show us in the code and provide a runnable example. I cannot get those results with your code. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jul 21, 2016 at 18:56
Firstly you are not really "pushing" anything to the array, just keeping a single value. Also the multi-select dose not keep track in which order you selected the items, it selects all the items between your two clicks, and does so in a top-down fashion. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jul 21, 2016 at 19:16
i didnt use push hoping to always add the value at the beginning of the array, i.e. at the index of 0... Push did the same thing what my code above is doing — rashmeePrakash
– rashmeePrakash, Commented Jul 21, 2016 at 19:18

theblindprophet · Accepted Answer · 2016-07-21 19:23:28Z

1

If you only wanted the values inside the select, disregarding order, you could use:

$(".yo").val()

However, you want them order which is much tricker:

var optVal = [];
var tempVal = [];

$(".yo").change(function() {

    $(".yo option").each(function() {
        var val = $(this).val();
        var tempVal = $(".yo").val();

        if(tempVal.indexOf(val) >= 0 && optVal.indexOf(val) < 0) {
            optVal.push(val);
        } else if(tempVal.indexOf(val) < 0 && optVal.indexOf(val) >= 0) {
            optVal.splice(optVal.indexOf(val) , 1);
        }

    })
    console.log("Opt: " + optVal);
})

When values have changed, trigger
Iterate through each option and get the value
Get all selected values from the select
If option is selected and not in optVal then push to optVal
If option is not selected and inside optVal then remove from optVal

This will keep them in the order they have been selected.

CodePen: http://codepen.io/theblindprophet/pen/RRrJXG?editors=1010

answered Jul 21, 2016 at 19:23

theblindprophet

7,9577 gold badges44 silver badges60 bronze badges

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

2 Comments

rashmeePrakash Over a year ago

Great! This works! I have a question though... What if I want every element I select next I want it to go to the index 0. So everytime I select an option I want that value at index 0

theblindprophet Over a year ago

optVal.unshift(val);

Hopeless · Accepted Answer · 2016-07-21 19:03:28Z

0

Try this code:

var optVal = new Array();

$('option').click(function() {
  optVal.push($(this).val());
});

answered Jul 21, 2016 at 19:03

Hopeless

4696 silver badges16 bronze badges

3 Comments

rashmeePrakash Over a year ago

I have tried this. I didnt get any result. Thank you though

Hopeless Over a year ago

@rashmeePrakash hmm, I wonder why it didn't work. Here is a fiddle of it with a live version jsfiddle.net/h98sLubr

Hopeless Over a year ago

No worries, one thing that might make it fail sometimes is using the .click() function form of jquery vs the .on("click", function(){}). the .on method is a bit more versatile, and can be bound after the event is added.

Collectives™ on Stack Overflow

How to push values from a multiple select dropdown to an array?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related