Over a million developers have joined DZone.

Populate a jQuery Dropdown From AJAX

DZone's Guide to

Populate a jQuery Dropdown From AJAX

This quick snippet will show you how to handle the AJAX request for a jQuery drop-down menu and populate it with the response.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

            type: "POST",
            url: urlPath,
            success: function(data)
                    '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

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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

jquery ,ajax ,javascript ,web development

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}