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><scriptsrc=</script></head><bodystyle="text-align:center;"id="body"><h1id="h1"style="color:green;">neveropen</h1><pid="GFG_UP"style="font-size: 15px;font-weight: bold;"></p><selectid="elmt"><optionvalue="v1"> YEW </option><optionvalue="v4"> ZAC </option><optionvalue="v2"> ABC </option><optionvalue="v3"> DFG </option><optionvalue="v5"> MNO </option><optionvalue="v9"> STU </option></select><br><br><buttononclick="gfg_Run()">Click Here</button><pid="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.
<!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;"> neveropen </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> |
