通过遍历对象数组来填充下拉列表 [英] 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 to populate the below dropdown with options from array.

<div id="LOBSelect" class="clearfix displayOnCreate">
    <span class="label">Dropdown</span>
    <select name="lob-select" class="dk" id="lobSelect"></select>
</div>

以下循环仅使用选项表单对象[GTI]而不是第一个生成一个下拉列表. 有人可以告诉我这是怎么回事.

The following loop only produces a dropdown with option form object [GTI] not the first one. Can anybody please tell me what is wrong here.

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

推荐答案

您需要使用 .append () 代替.html()

将参数指定的内容插入到匹配元素集中每个元素的末尾.

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

代码

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

演示

这篇关于通过遍历对象数组来填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！