How to sort option elements alphabetically using jQuery ?

The task is to sort the options of <select> element on its place. Here are a few of the most techniques discussed with the help of JavaScript.

Approach 1: First get the all option element’s value. Use .remove() method to remove options temporarily from the <select> element. Then call .sort() method on the values and sort them alphabetically. Now use .append() method to append them again.

  • Example: This example implements the above approach.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Sorting options elements alphabetically using jQuery.
        </title>
        <script src=
        </script>
    </head>
      
    <body style="text-align:center;" id="body">
        <h1 id="h1" style="color:green;"
                GeeksforGeeks 
            </h1>
        <p id="GFG_UP" style="font-size: 15px;
                              font-weight: bold;">
        </p>
        <select id="elmt">
            <option value="v1"> YEW </option>
            <option value="v4"> ZAC </option>
            <option value="v2"> ABC </option>
            <option value="v3"> DFG </option>
            <option value="v5"> MNO </option>
            <option value="v9"> STU </option>
        </select>
        <br>
        <br>
        <button onclick="gfg_Run()">
            Click Here
        </button>
        <p id="GFG_DOWN" style="color:green; 
                                font-size: 30px; 
                                font-weight: bold;">
        </p>
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML = 
              "Click on the button to sort the options" +
              " of the selected elements.";
      
            function gfg_Run() {
                $("#elmt").append($("#elmt option")
                                  .remove().sort(function(a, b) {
                    var at = $(a).text(),
                        bt = $(b).text();
                    return (at > bt) ? 1 : ((at < bt) ? -1 : 0);
                }));
                el_down.innerHTML = "Select options are sorted";
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Approach 2: First get the all option element’s value and then use .detach() method to remove options temporarily from the DOM tree. Then Call .sort() method on the values and sort them alphabetically. Use .appendTo() method to append options to the <select> element.

  • Example: This example implements the above approach.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Sorting options elements alphabetically using jQuery.
        </title>
        <script src=
        </script>
    </head>
      
    <body style="text-align:center;" id="body">
        <h1 id="h1" style="color:green;"
                GeeksforGeeks 
            </h1>
        <p id="GFG_UP" style="font-size: 15px; 
                              font-weight: bold;">
        </p>
        <select id="elmt">
            <option value="v1"> YEW </option>
            <option value="v4"> ZAC </option>
            <option value="v2"> ABC </option>
            <option value="v3"> DFG </option>
            <option value="v5"> MNO </option>
            <option value="v9"> STU </option>
        </select>
        <br>
        <br>
        <button onclick="gfg_Run()">
            Click Here
        </button>
        <p id="GFG_DOWN" style="color:green; 
                                font-size: 30px;
                                font-weight: bold;">
        </p>
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML = 
                 "Click on the button to sort the options" +
                 " of the selected elements.";
      
            function gfg_Run() {
                var options = $("#elmt option");
                options.detach().sort(function(a, b) {
                    var at = $(a).text();
                    var bt = $(b).text();
                    return (at > bt) ? 1 : ((at < bt) ? -1 : 0);
                });
                options.appendTo("#elmt");
                el_down.innerHTML = "Select options are sorted";
      
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:
  • full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.