AliIybar: Created page with "Category:AJAX Category:JQuery == HTML == == Data == [ {"id":1,"name":"Option 1"}, {"id":2,"name":"Option 2"}, {"id":3,"na..."

2019-05-22T10:50:37Z

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..."

New page

[[Category:AJAX]]
[[Category:JQuery]]
== 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 ==
<pre class="brush:js;">
$.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>');
});
}
}
}
</pre>

Populate a jQuery Dropdown From AJAX - Revision history

AliIybar: Created page with "Category:AJAX Category:JQuery == HTML == == Data == [ {"id":1,"name":"Option 1"}, {"id":2,"name":"Option 2"}, {"id":3,"na..."