Populating Dropdown By Looping Through An Array Of Objects

http://jsfiddle.net/5m86J/6/ returnLOB =[ { id: 1, name:'CIB' }, { id: 2, name:'GTI' } ] The Above is the array of objects.I need t

Solution 1:

You need to use .append() instead of .html()

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

Code

$('#LOBSelect').find('select[name="lob-select"]').append($('<option/>', {
    value: returnLOB[j].name,
    text: returnLOB[j].name,
    id: returnLOB[j].id
}));

DEMO

Solution 2:

Demo :http://jsfiddle.net/lotusgodkk/5m86J/7/

for (var j = 0; j < returnLOB.length; j++){
   $('#LOBSelect').find('select[name="lob-select"]').append($('<option/>', {
      value: returnLOB[j].name,
      text: returnLOB[j].name,
      id: returnLOB[j].id
  }));
}

Solution 3:

This could be done like this: http://jsfiddle.net/bX8nK/3/

var returnLOB = [{
    id: 1,
    name: "CIB"
}, {
    id: 2,
    name: "GTI"
}

]

$(returnLOB).each(function() {
    var lob = this;
    $('#LOBSelect select[name=lob-select]').append(
        $('<option/>', {
            value: lob.name,
            text: lob.name,
            id: lob.id
        })
    );
});

The .find() method which is called directly after the selector, could be made more efficient/readable by extending the selector itself.

Solution 4:

Try this:

for (var i = 0; i < returnLOB .length; i++) {
                $("#lobSelect").append("<option id='"+returnLOB [i].Name+"' value='" + returnLOB [i].Name+ "'>" + result.results[i].Name + "</option>");
            }