Sébastien’s Coding Journey

August 4, 2009

Sorting drop-down list with JQuery

Filed under: JQuery — Tags: , — Sébastien Ayotte @ 11:25 am

Users likes to see a list in alphabetical order. So I decided to sort all my drop-down list with JQuery.

First, I need to include JQuery.

<script type="text/javascript" src="js/jquery.js"></script>

Second, I need a function that will sort all the drop-down list in a page.

function sortDropDownListByText() {
    // Loop for each select element on the page.
    $("select").each(function() {
        
        // Keep track of the selected option.
        var selectedValue = $(this).val();

        // Sort all the options by text. I could easily sort these by val.
        $(this).html($("option", $(this)).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
        }));

        // Select one option.
        $(this).val(selectedValue);
    });
}

Third, I can only sort the drop-down list when the document is completely loaded. So in the head element of the page, I use the JQuery’s ready event.

<script type="text/javascript">
    $(document).ready(sortDropDownListByText);
</script>

Cheers :-)

About these ads

24 Comments »

  1. Hi Sebastien,

    Thanks for the nice post, i would love to see that implemented on a sharepoint page. can you please post a guideline as to how do i do this on a sharepoint page. i have a document library and thre is a upload form with few dropdowns wchih are not sorted alphabetically…

    much appriciate your help. thanks.

    Comment by Naresh — August 7, 2009 @ 4:25 pm

    • Hi Naresh,

      I’m not familiar with the term sharepoint. Do you mean that you have a master page where you want to put the JavaScript to sort all your drop-down list? In this case, it should be easy to put this script in the head section of the master page.

      Comment by Sébastien Ayotte — August 7, 2009 @ 6:08 pm

  2. thanks Sebastien, i will try out and let you know.

    Comment by Naresh — August 10, 2009 @ 10:13 am

  3. Great Article. This code will only work for dropdown list in SharePoint will a selection option. In SharePoint, if the property contain more than 30esh items, a different DropDown box that allows the user to type the value. This type of control will not sort. any ideas on how to sort work for this control?

    Comment by Mark Chaaban — September 12, 2009 @ 9:15 pm

    • I am not familiar with SharePoint but if the control you’re talking about doesn’t generate the drop-down list with the select/option elements, it will not work.

      Can you provide more information about the HTML generated by this control? It should be possible to build a solution for that control too.

      Comment by Sébastien Ayotte — September 14, 2009 @ 6:49 am

      • Thank you for you quick response. SharePoint have two types of dropdowns, one of them is the “Select/Option” element, this control is used for small selections. For bigger selection Sharepoint uses the input control. the HTML code for that is:

        The DropDown List is from the Choices property. 1960|1 represents the Year 1960, 1961|2 represents the Year 1961, etc…

        Hope this enough information about the control. Thank you,

        Comment by Mark Chaaban — September 14, 2009 @ 8:17 am

  4. Sorry For some reason the HTML Code was not added to the previous comment. here is the HTML Code
    “”

    Comment by Mark Chaaban — September 14, 2009 @ 8:18 am

  5. I took out all the GUID ID’s and replaced the “” with “)”. hope this will work.

    (input name=”ControlName_SometypeofGUID” type=”text” value=”2009″ id=”ControlID_SometypeofGUID” class=”ms-lookuptypeintextbox” onfocusout=”HandleLoseFocus()” opt=”_Select” title=”Year” optHid=”GUIDID_HERETO” onkeypress=”HandleChar()” onkeydown=”HandleKey()” match=”” choices=”1960|1|1961|2|1962|3|1963|4|1964|5|1965|6|1966|7|1967|8|1968|9|1969|10|1970|11|1971|12|1972|13|1973|14|1974|15|1975|16|1976|17|1977|18|1978|19|1979|20|1980|21|1981|22|1982|23|1983|24|1984|25|1985|26|1986|27|1987|28|1988|29|1989|30|1990|31|1991|32|1992|33|1993|34|1994|35|1995|36|1996|37|1997|38|1998|39|1999|40|2000|41|2001|42|2002|43|2003|44|2004|45|2005|46|2006|47|2007|48|2008|49|2009|50|2010|51|2011|52|2012|53|2013|54|2014|55|2015|56|2016|57|Delete|59|PERM|58″ onchange=”HandleChange()” /><img alt="Display lookup values" onclick="ShowDropdown" src="/_layouts/images/dropdown.gif" style="border-width:0px;vertical-align:middle;")

    Comment by Mark Chaaban — September 14, 2009 @ 8:21 am

  6. Dude, I saved a lot of time thanks to you !

    Comment by Mathieu Hautenauve — June 7, 2011 @ 6:09 am

  7. Very neat solution. Thank you. Merci!

    Comment by Mark — October 10, 2011 @ 10:02 am

  8. hi I tried the code but it doesnot work on cloned select elements on IE 8… In all other browsers its working fine

    Comment by Himanshu Saraswat — January 12, 2012 @ 1:00 am

  9. Thanks for the post, this helped a lot. Please note that you need to transform your a.text and b.text to UPPERCASE as it won’t sort lowercase the same.

    Here’s the line of code:

    return a.text.toUpperCase() == b.text.toUpperCase() ? 0 : a.text.toUpperCase() < b.text.toUpperCase() ? -1 : 1

    Comment by Mark Dempsey — January 17, 2012 @ 1:01 pm

  10. Awesome solution….sure saved me a lot of stress

    Comment by Electra — April 10, 2012 @ 5:07 am

  11. great 1

    Comment by vishal — June 14, 2012 @ 5:02 am

  12. Thanks!
    Very helpful

    Comment by Jordan — July 26, 2012 @ 6:57 am

  13. Attractive section of content. I just stumbled upon your blog and in accession capital to assert that I get in fact enjoyed account your blog posts.
    Any way I’ll be subscribing to your feeds and even I achievement you access consistently rapidly.

    Comment by C5-03 — July 28, 2012 @ 2:21 am

  14. firebug 1.0.4:

    TypeError: $(“option”, $(this)).sort is not a function

    $(this).html($(“option”, $(this)).sort(function(a, b) {

    someone could tell me why?

    Comment by lorenzo — October 25, 2012 @ 4:10 am

  15. Hey I know this is off topic but I was wondering if
    you knew of any widgets I could add to my blog that automatically tweet
    my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

    Comment by nintendo3dsworld.org — October 28, 2012 @ 5:11 am

  16. Thanks,
    Very useful stuff

    Comment by Saravanan — February 11, 2013 @ 5:02 am

  17. These anti-oxidants are good and have potential
    in them to help you lose weight, there are exceptions to using diet
    and pure green coffee bean extract reviews with ephedra. Numerous
    other studies have proved that green tea reduces the oxidation property of LDL cholesterol there by reducing the chance of developing diabetes.

    Comment by http://www.imieiregali.com/ — May 3, 2013 @ 9:44 am

  18. Thank you for the post. This sorting code words great! You saved me a ton of work. Cheers! :)

    Comment by Cathy — July 15, 2013 @ 11:26 am

  19. Amazing blog! Do you have any recommendations for aspiring writers?
    I’m hoping to start my own website soon but I’m a little lost on everything.
    Would you suggest starting with a free platform like WordPress
    or go for a paid option? There are so many options out there that
    I’m completely confused .. Any ideas? Many thanks!

    Comment by coffret cadeau — July 29, 2014 @ 9:52 am

  20. This is the very best solution I’ve ever seen on the web. For almost 5 hours of solving this problem, this code was made my night peaceful. Thank you very much!!!! :D

    Comment by Miggy San — December 3, 2014 @ 12:47 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The WordPress Classic Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: