Question

I have a Dropdown box, Which is getting filled by values from mySQL database, here is the part of the script that I am using to fill the drop down.

var details = JSON.parse(data);
console.log(details);
for ( i = 0; i < details.aaData.length; i++) {
console.log(details.aaData[i].id);
$('select#package-id option').append(details.aaData[i].id);
}

and here is HTML,

<select name="package" name="package-id" id="package-id">
        <option></option>
</select>

But the dropdown shows the values as 1234 where as I am expecting them as,

1

2

3

4

Any workarounds for this?

Answer 1

try Changing This:

var details = JSON.parse(data);
console.log(details);
for ( i = 0; i < details.aaData.length; i++) {
console.log(details.aaData[i].id);
$('select#package-id option').append(details.aaData[i].id);
}

to this:

var details = JSON.parse(data);
console.log(details);
for ( i = 0; i < details.aaData.length; i++) {
console.log(details.aaData[i].id);
$('select#package-id').append("<option value='"+details.aaData[i].id+"'>"+details.aaData[i].id+"</option>");
}

it looks right now like you may be creating a bunch of option inside the blank option.