Populating ComboBox with JSON data

Question

My combobox is not showing any items after my load method runs. I've debugged my loop and I can see it trying to populate my combobox (or looking like it is doing it), but there are no items in the combobox. What am I doing wrong?

HTML:

<select id="filterComboBox">
</select>

JSON data:

{
    "Filters": [
        {
            "text": "Sys",
            "value": "Sys"
        },
        {
            "text": "EE/RF",
            "value": "EE/RF"
        },
        {
            "text": "ME",
            "value": "ME"
        }
    ]
}

Method loading combobox:

function populateFiltersComboBox(path) {
    $.getJSON(path)
    .done(function (data) {
        if (!data) {
            return
        }

        $(data.Filters).each(function () {
            debugger;

            var option = $('<option />');

            option.attr('value', this.value).text(this.text);

            $('#filterComboBox').append(option);
        });
    });
}

Answer 1

Try

$('#filterComboBox').append('<option value="' + this.value + '">' + this.text + '</option>');

select is picky about how you do things. I recommend just appending HTML.