Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to sort option elements alphabetically using jQuery ?

  • Last Updated : 30 Dec, 2019

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Example: This example implements the above approach.




    <!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>
  • 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.




    <!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>
  • Output:




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :

    Start Your Coding Journey Now!