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:

• Dropdown Menu Question
• JavaScript Action

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'));