Unable to populate combobox using JSON response - json

Question

I am using JQuery mobile for the first time. I want to populate a combobox from the JSON result. Here is the markup of the combobox:
<select name="comboChapters" id="comboChapters" data-native-menu="false">
</select>
The JSON response is like this:
[{"chapterId":1,"chapterName":"First"},{"chapterId":2,"chapterName":"Second"}]
And this is the JavaScript function I have written:
$(document).on('pagecreate', '#mainPage', function () {
var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
if (condition === 'ONLINE') {
var options = '';
$.ajax({
url: '/GetChaptersList',
type: 'GET',
success: function (data) {//populate the combobox
for (var i = 0; i < data.length; i++) {
options += '<option value="' +
data[i].chapterId + '">' +
data[i].chapterName + '</option>';
}
$("#comboChapters").html(options);
},
});
}
else
alert('Please connect to the internet.');
});
The above code does not work. I have even tried the following code:
$(data).each(function() {
var option = $('<option />');
option.attr('value', this.chapterId ).text(this.chapterName );
$('#comboChapters').append(option);
});
Can someone point out how it can be done? I need the same functionality for checkbox list as well.

Answer 1

Populating the combobox appears to work. Check this:
<select name="comboChapters" id="comboChapters" data-native-menu="false">
var data = [{"chapterId":1,"chapterName":"First"},{"chapterId":2,"chapterName":"Second"}];
$(data).each(function() {
var option = $('<option />');
option.attr('value', this.chapterId ).text(this.chapterName );
$('#comboChapters').append(option);
});
http://jsfiddle.net/qsafmw5g/
Are you sure your request gets the data properly? Is "/GetChaptersList" the right URL?
Edit:
To make it work with jquery mobile you need to add this after the code that populates the options:
$('#comboChapters').selectmenu('refresh', true);
Edited jsfiddle: http://jsfiddle.net/qsafmw5g/1/