Sort Your Answer Options Alphabetically

If you have a need to alphabetize your answer options, say, for instance, you have a list of states or countries we have a handy feature that allows you to set your answer options to alphabetize. This works to alphabetize answer options in Radio Button, Checkboxes, and Dropdown Menus. Trouble is, if you are providing a translated version of your survey, this won't work for Dropdown Menus.

The following JavaScript code can take a dropdown menu question and automatically sort the options for you in the browser for all translations.

Check it out in an example survey!

OR

Add a survey with this setup to your account!

This workaround uses the following features:

Some caveats:
  • Articles ("The", "A", "An") are not ignored.
  • Not recommended for numbers going higher than 9 since JavaScript sorts character by character (10 is less than 2, for instance)

Setup

If you have answer options that need to be alphabetized for the survey taker for each translation copy and paste the below JavaScript into a JavaScript action on the same page.

var sortOptions = function (type, className) {
    var question = $('.sg-type-' + type + '.' + className);
    var option;
    var container;
    var unsorted = [];
   
    switch (type) {
        case 'menu':
            option = 'option';
            container = 'select';
            unsorted = question.find(option).not('[value="NoAnswer"]');
            break;
        case 'radio':
            option = 'li';
            container = 'ul';
            unsorted = question.find(option + ' label');
            break;
        case 'checkbox':
            option = 'li';
            container = 'ul';
            unsorted = question.find(option + ' label');
            break;
        default:
            option = 'li';
            container = 'ul';
            unsorted = question.find(option + ' label');
            break;
    }
   
    var sortData = [];
    var sorted = [];
    unsorted.each(function (i) {
        sortData.push($(this).text());
    });

    sortData.sort(function (a, b) {
        return a.localeCompare(b);
    });
 
    $.each(sortData, function (i, val) {
      sorted.push(question.find(option + ':contains("' + val + '")'));
    });
   
    $.each(sorted, function (i, val) {
        var containerEl = val.parents(container);
        val.remove().appendTo(containerEl);
    });
}

$(sortOptions('menu', 'sort-menu'));
$(sortOptions('radio', 'sort-radio'));
$(sortOptions('checkbox', 'sort-checkbox'));

You will also need to add a CSS Class Name that correlates with the function call highlighted at the bottom of the script. For instance, in the code above you would need to add a class name sort-menu for a dropdown menu. If you have more than one dropdown menu on the page make sure you have unique class names for each question. You can put in function calls like so:

$(sortOptions('menu', 'sort-menu'));
$(sortOptions('menu', 'sort-menu2'));

You can also comment out or remove the function calls at the bottom that don't apply. If you've only have a dropdown menu to alphabetize you can comment out the other functions like the below: 

$(sortOptions('menu', 'sort-menu'));
//$(sortOptions('radio', 'sort-radio'));
//$(sortOptions('checkbox', 'sort-checkbox'));

Scripting and Other Custom Solutions

We’re always happy to help you debug any documented script that is used as is. That said, we do not have the resources to write scripts on demand or to debug a customized script.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for Alchemer features and functionality ideas that might meet your needs. Beyond this, check out our Professional Services; these folks have the scripting chops to help you to achieve what you are looking for!

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In