CODEWITHSUNDEEP
javascriptjqueryhtml
p1xelarchitect
p1xelarchitect

Reputation: 289

How to re-order the value of a multiple select based on user selection order

How can I re-order the comma 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!

Upvotes: 2

Views: 6635

Answers (4)

lgd555521gmailcom
lgd555521gmailcom

Reputation: 1

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]);
}

Upvotes: 0

p1xelarchitect
p1xelarchitect

Reputation: 289

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.net/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');
                }
            }
        });
    }
}

Upvotes: 1

krunal sojitra
krunal sojitra

Reputation: 385

try this https://jsfiddle.net/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());
});

Upvotes: 0

NOBrien
NOBrien

Reputation: 459

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

Upvotes: 1

Related Questions