How can I re-order the ma delimited value of a select multiple element based on the order in which the options were selected by the user instead of the order of the options in the html?

For example:

<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

... If the user selects "3", then "1", then "2", the returned value of the select will be "1,2,3". How can I make it return "3,1,2"?

Note, I am using jQuery and HTML5, so I can use those tools if needed.

Thanks!

How can I re-order the ma delimited value of a select multiple element based on the order in which the options were selected by the user instead of the order of the options in the html?

For example:

<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

... If the user selects "3", then "1", then "2", the returned value of the select will be "1,2,3". How can I make it return "3,1,2"?

Note, I am using jQuery and HTML5, so I can use those tools if needed.

Thanks!

• javascript
• jquery
• html

• Something similar. stackoverflow./questions/30372235/… – rajesh Commented Apr 6, 2016 at 5:41
• jsfiddle/nbh72tc5 can you try this? – Sam Teng Wong Commented Apr 6, 2016 at 5:41
• @SamTengWong Thanks, your example shows the default setting. If you select 3, then 1, then 2, it will alert "1,2,3". I need some function that will alert the value as "3,1,2", because that's the order in which I selected the options. – p1xelarchitect Commented Apr 6, 2016 at 5:44
• @rajesh Yes I saw that post before I asked my question. That question is just asking to return the value onchange but that poster isn't concerned with the order of selection. – p1xelarchitect Commented Apr 6, 2016 at 5:46
• You have to follow this way only to get the value in the order you have selected. By default it will always give you in top to bottom order. So what you can do is on change event you can store the values in an array. – rajesh Commented Apr 6, 2016 at 5:51

4 Answers 4

This records the click of each elements add saves it to an array. When an item is deselected it is removed from the array.

var vals = [];
$(document).ready(function(e) {
  $('#selector').change(function(e) {
    for(var i=0; i <$('#selector option').length; i++) {
      if ($($('#selector option')[i]).prop('selected') ) {
        if (!vals.includes(i)) {
          vals.push(i);
        }
      } else {
        if (vals.includes(i)) {
          vals.splice(vals.indexOf(i), 1);
        }
      }
    }

  })

  $("#final").click(function(e) {
    var order = '';
    vals.forEach(function(ele) {
      order += $($('#selector option')[ele]).val() + ',';
    })

    console.log(order);
  })
})

Codepen: http://codepen.io/nobrien/pen/pydQjZ

None of the proposed solutions floated my boat, so I came up with this:

My solution is to add an html5 attribute to the multiselect element, data-sorted-values, to which I append new values, and remove un-selected values, based on the latest change.

The effect in the end is that data-sorted-values can be queried at anytime to get the current list of user-ordered values. Also, all selected options hold an attribute of "selected".

I hope this can help someone else out there...

https://jsfiddle/p1xelarchitect/3c5qt4a1/

HTML:

<select onChange="update(this)" data-sorted-values="" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option> 
</select>

Javasript:

function update(menu) {

    // nothing selected
    if ($(menu).val() == null) 
    {
        $.each($(menu).find('option'), function(i) 
        {
            $(this).removeAttr('selected');
            $(menu).attr('data-sorted-values', '');
        });
    } 
    // at least 1 item selected
    else 
    {
        $.each($(menu).find('option'), function(i) 
        {
            var vals = $(menu).val().join(' ');
            var opt = $(this).text();

            if (vals.indexOf(opt) > -1) 
            {
                // most recent selection
                if ($(this).attr('selected') != 'selected') 
                {
                    $(menu).attr('data-sorted-values', $(menu).attr('data-sorted-values') + $(this).text() + ' ');
                    $(this).attr('selected', 'selected');
                }
            } 
            else 
            {
                // most recent deletion
                if ($(this).attr('selected') == 'selected') 
                {
                    var string = $(menu).attr('data-sorted-values').replace(new RegExp(opt, 'g'), '');
                    $(menu).attr('data-sorted-values', string);
                    $(this).removeAttr('selected');
                }
            }
        });
    }
}

try this https://jsfiddle/ksojitra00023/76Luf1zs/

  <select multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <div id="output"></div>

$('select').click(function(){
  $("#output").append($(this).val());
});

var data = '3,1,2';
var dataarray=data.split(",");
var length =dataarray.length;
for(i=0;i<length;i++){
    // Set the value
    $('#select').multiSelect('select',dataarray[i]);
}