I'm struggling to populate the multiselect field with data from a JSON object. No matter which multiselect I use, the data shows in inspect mode but not on the frontend. It was supposed to look like this.
https://i.sstatic.net/FVz2H.png
but it comes out like this, with no options showing.
https://i.sstatic.net/aAOeU.png My HTML code:
<div>
<span>Tags</span>
<select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" name="tags" multiple></select>
</div>
My JavaScript code:
success: function (data) {
console.log(data);
$.each(data, function (index, value) {
var tagOption = ('<option value=' + value.Id + '>' + value.Name + '</option>');
console.log(value.Name);
$('#choices-multiple-remove-button').append(tagOption);
});
$(document).ready(function () {
var multipleCancelButton = new Choices('#choices', {
removeItemButton: true,
maxItemCount: 5,
searchResultLimit: 1,
renderChoiceLimit: 2
});
});
My JSON data:
{
"Id": 1,
"Name": "Tasty",
"TimeStamp": null,
"FOodOrTravel": 1
},
{
"Id": 2,
"Name": "Smells Bad",
"TimeStamp": null,
"FOodOrTravel": 1
},
{
"Id": 3,
"Name": "Spicy",
"TimeStamp": null,
"FOodOrTravel": 1
},
{
"Id": 4,
"Name": "Expensive",
"TimeStamp": null,
"FOodOrTravel": 1
}
console.log(data) https://i.sstatic.net/qXrMM.png