Question

http://jsfiddle.net/5m86J/6/

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

以上是对象数组。我需要使用数组中的选项填充下面的下拉列表。

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

以下循环仅生成带有选项表单对象[GTI]的下拉列表，而不是第一个。谁能告诉我这里有什么问题。

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
    }));
}

Answer 1

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

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

代码的

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

DEMO

Answer 2

演示：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
  }));
}

Answer 3

可以这样做：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
        })
    );
});

在选择器之后直接调用的.find（）方法可以通过扩展选择器本身来提高效率/可读性。

Answer 4

试试这个：

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

通过循环遍历对象数组来填充下拉列表

4 个答案: