Sorting options elements alphabetically using jQuery

Question

I m trying to understand sorting option elements within a select element alphabetically  Ideally  I d like to have this as a separate function where I can just pass in the select element since it needs to be sorted when the user clicks some buttons   I ve searched high and low for a good way of doing this  but haven t been able to find anything that worked for me   The option elements should be sorted alphabetically by text  not value   Is this possible in some way

User · Answer

html    lt select id  list  gt       lt option value  op3  gt option 3 lt  option gt       lt option value  op1  gt option 1 lt  option gt       lt option value  op2  gt option 2 lt  option gt   lt  select gt    jQuery   var options       list option                          Collect options          options detach   sort function a b                     Detach from select  then Sort     var at     a  text        var bt     b  text                 return  at  gt  bt  1   at  lt  bt  -1 0                 Tell the sort function how to order     options appendTo   list                                Re-attach to select   I used tracevipin s solution  which worked fantastically  I provide a slightly modified version here for anyone like me who likes to find easily readable code  and compress it after it s understood  I ve also used  detach instead of  remove to preserve any bindings on the option DOM elements

User · Answer

I combined parts from marxin s and kuxa s excellent answers to create a jQuery custom function that    sorts the options by their text values  case-insensitive    maintains any already-selected value  and  returns the original jQuery objects against which the function is executed     fn extend       sortSelect             return this each function                let  this     this                   original selection    this val                     options    this find  option                    arr    options map function    o    return   t    o  text    v  o value       get                 arr sort  o1  o2    gt                       sort select                 let t1   o1 t toLowerCase                         t2   o2 t toLowerCase                    return t1  gt  t2   1   t1  lt  t2   -1   0                                options each  i  o    gt                    o value   arr i  v                    o  text arr i  t                                 this val original selection                            Working example on jsFiddle is available at https   jsfiddle net jhfrench 64och25e

User · Answer

Accepted answer is not the best in all cases because sometimes you want to perserve classes of options and different arguments  for example data-foo    My solution is   var sel       select id    var selected   sel val       cache selected value  before reordering var opts list   sel find  option    opts list sort function a  b    return   a  text    gt    b  text     1   -1      sel html     append opts list   sel val selected      set cached selected value     For ie11 or those who get a blank options  replace html     empty

User · Answer

The jquery selectboxes js plugin has a sort method  You can implement the plugin  or dive into the code to see a way to sort the options

User · Answer

I know this topic is old but I think my answer can be useful for a lot of people   Here is jQuery plugin made from Pointy s answer using ES6          Sort values alphabetically in select    source  http   stackoverflow com questions 12073270 sorting-options-elements-alphabetically-using-jquery       fn extend       sortSelect             let options   this find  option                arr   options map function    o    return   t    o  text    v  o value       get             arr sort  o1  o2    gt       sort select             let t1   o1 t toLowerCase                     t2   o2 t toLowerCase                return t1  gt  t2   1   t1  lt  t2   -1   0                       options each  i  o    gt                o value   arr i  v                o  text arr i  t                           Use is very easy     select   sortSelect

User · Answer

None of the answers worked for me   For some strange reason  when looping through the options  each option returns nothing when text   is called   Instead  I was forced to retrieve the option s label via attr  label           Sort the options of the target select list    alphabetically by label  For some reason  when    we call detach    the returned options have no    text   and instead we re forced to get the option s    label via the  label  attribute      param select jQuery selector     function sort multi select select        var options   select find  option        options detach   sort function  a  b            var at     a  attr  label      label  not text               bt     b  attr  label            return at  gt  bt   1   at  lt  bt   -1   0              options appendTo select        example sort multi select     my select

User · Answer

Malakgeorge answer is nice an can be easily wrapped into a jQuery function     fn sortSelectByText   function        this each function            var selected     this  val             var opts list     this  find  option            opts list sort function a  b    return   a  text    gt    b  text     1   -1                this  html     append opts list             this  val selected               return this

User · Answer

lt select id  mSelect   gt       lt option value  val1   gt  DEF  lt  option gt       lt option value  val4   gt  GRT  lt  option gt       lt option value  val2   gt  ABC  lt  option gt       lt option value  val3   gt  OPL  lt  option gt       lt option value  val5   gt  AWS  lt  option gt       lt option value  val9   gt  BTY  lt  option gt   lt  select gt           mSelect   append     mSelect option   remove   sort function a  b        var at     a  text    bt     b  text        return  at  gt  bt  1   at  lt  bt  -1 0

User · Answer

Here s my improved version of Pointy s solution   function sortSelectOptions selector  skip first        var options    skip first      selector     option not  first        selector     option        var arr   options map function    o    return   t    o  text    v  o value  s    o  prop  selected         get        arr sort function o1  o2          var t1   o1 t toLowerCase    t2   o2 t toLowerCase          return t1  gt  t2   1   t1  lt  t2   -1   0               options each function i  o            o value   arr i  v            o  text arr i  t           if  arr i  s                  o  attr  selected    selected   prop  selected   true             else                 o  removeAttr  selected                  o  prop  selected   false                          The function has the skip first parameter  which is useful when you want to keep the first option on top  e g  when it s  choose below     It also keeps track of the previously selected option   Example usage    jQuery document  ready function         sortSelectOptions   select-id   true

User · Answer

What I d do is    Extract the text and value of each  lt option gt  into an array of objects  Sort the array  Update the  lt option gt  elements with the array contents in order    To do that with jQuery  you could do this   var options      select whatever option    var arr   options map function    o    return   t    o  text    v  o value       get    arr sort function o1  o2    return o1 t  gt  o2 t   1   o1 t  lt  o2 t   -1   0      options each function i  o      o value   arr i  v      o  text arr i  t         Here is a working jsfiddle   edit  mdash  If you want to sort such that you ignore alphabetic case  you can use the JavaScript  toUpperCase   or  toLowerCase   functions before comparing   arr sort function o1  o2      var t1   o1 t toLowerCase    t2   o2 t toLowerCase       return t1  gt  t2   1   t1  lt  t2   -1   0

User · Answer

Yes you can sort the options by its text and append it back to the select box    function NASort a  b              if  a innerHTML     NA               return 1                   else if  b innerHTML     NA               return -1                          return  a innerHTML  gt  b innerHTML    1   -1         Fiddle  https   jsfiddle net vaishali ravisankar 5zfohf6v

[javascript] Sorting options elements alphabetically using jQuery

html:

jQuery:

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to sorting