Open In App

How to sort option elements alphabetically using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.




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


  • Last Updated : 30 Dec, 2019
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
    Similar Reads