Populate a jQuery Dropdown From AJAX

From Logic Wiki
Revision as of 11:50, 22 May 2019 by AliIybar (Talk | contribs) (Created page with "Category:AJAX Category:JQuery == HTML == <select id="dropdown"></select> == Data == [ {"id":1,"name":"Option 1"}, {"id":2,"name":"Option 2"}, {"id":3,"na...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

HTML

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

Data

[
   {"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"},
]

AJAX

$.ajax({
            type: "POST",
            url: urlPath,
            success: function(data)
            {
                helpers.buildDropdown(
                    jQuery.parseJSON(data),
                    $('#dropdown'),
                    'Select an 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>');
            });
        }
    }
}