I have a variable that stores a number. My goal is to dynamically add options to a select element based on the value of this variable. For example, if the variable equals 10, I need to append 10 options to the select element with each option displaying the next numeric value, starting from 1. Initially, there is one hard-coded option in the select element, and then additional options need to be added using JavaScript. However, I've encountered an issue with the scripts I've tried, as I keep receiving an error message stating "cannot use 'in' operator to search for length."
https://jsfiddle.net/v1yyhfm8/
HTML
<select id="main">
<option selected>1</option>
</select>
I attempted the following:
var total = dataSource.total();
for (var i = 2; i <= total; i++) {
var added = document.createElement('option');
var test = $('#main');
added.value = i;
added.innerHTML = i;
test.append(added);
}
and
var total = dataSource.total();
$.each(total, function (i, item) {
$('#main').append($('<option>', {
value: item.total,
text: item.text
}));
});