How to sort option elements alphabetically using jQuery?

Last Updated : 18 Jun, 2024

Sort option elements alphabetically using jQuery, you can extract the options, sort them, and then append them back in the sorted order. This process helps enhance the user experience by organizing dropdown options.

Below are the approaches to sort option elements alphabetically using jQuery:

Table of Content

Using sort() and append() Methods
Using .appendTo() and .sort() method

Using sort() and append() Methods

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

Example: This example sorts option elements alphabetically using sort() and append() Methods.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        Sorting options elements alphabetically using jQuery.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>

<body style="text-align:center;" id="body">
    <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>
        let el_up = document.getElementById("GFG_UP");
        let 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) {
                    let 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:

Using .appendTo() and .sort() method

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 sorts option elements alphabetically using sort() and append() Methods.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <title>
        Sorting options elements alphabetically using jQuery.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>

<body style="text-align:center;" id="body">
    <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>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = 
             "Click on the button to sort the options" +
             " of the selected elements.";

        function gfg_Run() {
            let options = $("#elmt option");
            options.detach().sort(function(a, b) {
                let at = $(a).text();
                let 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:

How to add options to a select element using jQuery?

PranchalKatiyar

Improve

Article Tags :

How to sort option elements alphabetically using jQuery?

Using sort() and append() Methods

Using .appendTo() and .sort() method

Similar Reads

Thank You!

What kind of Experience do you want to share?