Populate a jQuery Dropdown From AJAX

In a recent project I had to correct a lot of AJAX requests that will populate a HTML select dropdown, in this post I'm going to show you a quick snippet of how to handle the return of the AJAX request and populate a dropdown with the response.

First we start off by creating a HTML dropdown on the page with an ID attribute.

<select id="dropdown"></select>

Next we create an AJAX POST in jQuery to a urlPath that will return the data we need in a JSON object. On the return of this AJAX request we are going to parse the response and use this in the helpers.buildDropdown function that we will create.

$.ajax({
            type: "POST",
            url: urlPath,
            success: function(data)
            {
                helpers.buildDropdown(
                    jQuery.parseJSON(data),
                    $('#dropdown'),
                    'Select an option'
                );
            }
        });

The response that we are expecting from the AJAX call is a JSON object similar to the data below, it can be made up of multiple rows which each have an ID column and a NAME column.

The ID column is going to be used to populate the option element value attribute while the NAME column is going to be used as the text inside the option element. You can have whatever fields you want for this but in this example these are the columns that are expected in the buildDropdown function.

[
    {"id":1,"name":"Option 1"},
    {"id":2,"name":"Option 2"},
    {"id":3,"name":"Option 3"},
    {"id":4,"name":"Option 4"},
    {"id":5,"name":"Option 5"},
]

With creating the data and returning it in a way that is expected we can now create the buildDropdown function. First we start off by placing this function inside a helpers namespace, therefore you can continue to add to this namespace when you create more helpful functions.

Next create the function and pass in 3 parameters, the result is the JSON data object, the dropdown is the jQuery object of the dropdown, emptyMessage is the text we can use on the first empty option.

var helpers =
{
    buildDropdown: function(result, dropdown, emptyMessage)
    {
        // Remove current options
        dropdown.html('');

        // Add the empty option with the empty message
        dropdown.append('<option value="">' + emptyMessage + '</option>');

        // Check result isnt empty
        if(result != '')
        {
            // Loop through each of the results and append the option to the dropdown
            $.each(result, function(k, v) {
                dropdown.append('<option value="' + v.id + '">' + v.name + '</option>');
            });
        }
    }
}