DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Populate a jQuery Dropdown From AJAX

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.

Paul Underwood user avatar by
Paul Underwood
·
Aug. 05, 15 · Web Dev Zone · Tutorial
Like (3)
Save
Tweet
120.17K Views

Join the DZone community and get the full member experience.

Join For Free

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>');
            });
        }
    }
}
AJAX JQuery

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Correlation Between Fast TTM and Containers
  • What Emerging Technologies Make Data Centers More Energy Efficient?
  • Build a Data Pipeline on AWS With Kafka, Kafka Connect, and DynamoDB
  • Classification of Neural Networks in TensorFlow

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo