Sorting multiple select dropdown options using jquery

Question

I am using the following code for adding country where user selects country from one mutiple-select and adds to another multiple-select and on submit the countries of second multiple-select is inserted into database.

.js

$(document).ready(function(){
    $('.add').click(function(){
        $('#country_list option:selected').appendTo('#country_select');
    });
    $('.remove').click(function(){
        $('#country_select option:selected').appendTo('#country_list');
    });
    $('.add-all').click(function(){
        $('#country_list option').appendTo('#country_select');
    });
    $('.remove-all').click(function(){
        $('#country_select option').appendTo('#country_list');
    });
    $("#register").click(function() {  
    $("#country_select option").each(function() {
        $(this).attr("selected", "selected");
    });
});
});

.html

  <select id="country_list" size="10" multiple style="min-width: 200px;">
   <option value="US">United States</option>
   <option value="UK">United Kingdom</option>
   <option value="IN">India</option>          
  </select>
  <table border="0">
  <tr><td><input type="button" class='add' value=">"/></td></tr>
  <tr><td><input type="button" class='remove' value="<"/></td></tr>
  <tr><td><input type="button" class='add-all' value=">>>"/></td></tr>
  <tr><td><input type="button" class='remove-all' value="<<<"/></td></tr>
  </table>
  <select size="10" name="country_select[]" id="country_select" multiple  style="min-width: 200px;">
  </select>

Here when add button is clicked the selected items in dropdown country-list is moved to country-select.

What I require is that when a country is added then it should be moved into the dropdown country-select in order of name. Currently when a country is added it goes to the bottom of the list in country-options.

I tried this Javascript to sort contents of select element but not working.

Community · Accepted Answer · 2017-05-23 12:31:17Z

2

Call the following function each time an option moves to rearrange the select options from #country_select alphabetically

Js:

function reArrangeSelect() {
    $("#country_select").html($("#country_select option").sort(function(a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
    }))
}

Live Demo | Source | Credit

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Dec 24, 2012 at 7:24

extramaster

2,6532 gold badges27 silver badges29 bronze badges

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

Comments

charlietfl · Accepted Answer · 2012-12-24 07:28:06Z

1

Custom element sorter based on values

function optionSort(a, b) {
    return $(a).val() > $(b).val();
}

var opts = $('#selectID option').get();

$('#selectID ').html(opts.sort(optionSort))

DEMO : http://jsfiddle.net/5WgYK/

answered Dec 24, 2012 at 7:28

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

PodTech.io · Accepted Answer · 2016-04-13 09:09:53Z

0

If you need to sort the multiselect by selected whilst keeping the selected items at the top of the list, this will be useful.

$('#identifier option:selected').prependTo('#identifier');
$("#identifier").multiselect("refresh");

answered Apr 13, 2016 at 9:09

PodTech.io

5,31246 silver badges24 bronze badges

Collectives™ on Stack Overflow

Sorting multiple select dropdown options using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related