How to sort option elements alphabetically using jQuery?


Sometimes, we require sorting the options of the dropdown menu in alphabetical order. For example, you are selling computers on your website, and you want to allow users to select a computer based on the model. If your website contains hundreds of models of different brands, it will be hard for users to find a computer with a particular brand if it is not sorted. However, you can provide the search functionality but if it’s not there, then sorting all the option elements in alphabetical order is better.

Here, we will learn various approaches to sort all options of the dropdown element using jQuery.

Use the sort() method of jQuery

The sort() method allows us to sort() strings, numbers, or any values based on a particular condition. We can pass the comparator function to the sort() method, which returns 0, -1, and 1.

Syntax

Users can follow the syntax below to sort() all the options of the dropdown.

dorpdown.html(dorpdown.find('option').sort(function (option1, option2) {
   return $(option1).text() < $(option2).text() ? -1 : 1;
});

In the above syntax, the dropdown is an <select> HTML element. We used the find() method to find all options and apply the sort() function.

Algorithm

Users can follow the algorithm below to sort() all dropdown options in alphabetical order.

  • Step 1 − Access the <select> menu via id or tag.

  • Step 2 − Use the html() method to get the HTML of the <select> tag.

  • Step 3 − In the parameter of the html() method, use the find() method for all <option> elements.

  • Step 4 − After finding the options, apply the sort() method to all options.

  • Step 5 − In the sort() method, pass the callback comparator function as a parameter.

  • Step 6 − The comparator function takes the two options as a parameter and sorts them in alphabetical order.

  • Step 7 − From the comparator function, return the -1 or 1 based on the alphabetical order of the texts of the two options. We can use the text() method to get the text of <option> element.

Example 1

In the example below, we have created the dropdown menu using the <select> and <option> tags. Users can see that its options are not in alphabetical order.

After that, in jQuery, we accessed the <select> menu by tag-name and sorting all option elements. When users click the button in the output, they can see that options appear in alphabetical order.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
   <h2>Using the <i>jQuery sort() method</i> to sort all option elements of the dropdown</h2>
   <h3>Choose an option from the dropdown.</h3>
   <select>
      <option value = "Dell">Dell</option>
      <option value = "Lenovo">Lenovo</option>
      <option value = "MSI">MSI</option>
      <option value = "Apple">Apple</option>
      <option value = "HP">HP</option>
      <option value = "Acer">Acer</option>
      <option value = "Samsung">Samsung</option>
   </select> <br> <br>
   <button onclick = "sortOptions()"> Sort Options </button>
   <script>
      function sortOptions() {
         var dorpdown = $('select');
         dorpdown.html(dorpdown.find('option').sort(function (option1, option2) {
            return $(option1).text() < $(option2).text() ? -1 : 1;
         }));
      }
   </script>
</body>
</html>

Example 2

In this example also, we are using the sort() method to sort all options of the dropdown. Rather than accessing the dropdown menu, we have directly accessed all dropdown options using jQuery.

After that, we used the sort() method to sort all option elements based on their text value in lowercase. In the output, users can see that when they click the button, all cars of the dropdown get sorted in alphabetical order.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
   <h2>Using the <i>jQuery sort() method</i> to sort all option elements of the dropdown</h2>
   <p>Choose any option from the dropdwon.</p>
   <select>
      <option value = "BMW"> BMW </option>
      <option value = "OD"> OD </option>
      <option value = "Verna"> Verna </option>
      <option value = "Honda City"> Honda City </option>
      <option value = "Alto"> Alto </option>
      <option value = "i20"> i20 </option>
      <option value = "zen"> zen </option>
   </select>  <br> <br>
   <button onclick = "sortOptions()"> Sort Options </button>
   <script>
      function sortOptions() {
         var allOptions = $("select option");
         allOptions.sort(function (op1, op2) {
            var text1 = $(op1).text().toLowerCase();
            var text2 = $(op2).text().toLowerCase();
            return (text1 < text2) ? -1 : 1;
         });
         allOptions.appendTo("select");
      }
   </script>
</body>
</html>

In this tutorial, we have seen two different examples of sorting all dropdown list options. In both examples, we have used different approaches. In the first example, we used the find() method to get all options of <select> element, and in the second approach, we directly accessed all options by tag-name using jQuery.

Updated on: 16-Feb-2023

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements