Question

我显然在这里做错了什么，但我正绞尽脑汁试图解决这个问题。

所以我这样定义了<select></select>：

<select name="entryspeaker" id="entryspeaker">
    <option value="">No associated speaker</option>
</select>

然后在我的脚本中，我定义了一组'speaker'对象。我跑了，我试图将它们添加到列表中（如here所示），所以：

for ( speakerIdx in speakerlist ) {
    var speaker = speakerlist[speakerIdx];
    var newOption = $('<option></option>').val(speaker.__id__).html(speaker.name);
    $('#entryspeaker').append( newOption );
    console.log(speaker);
    console.log(newOption);
}

在检查日志中的speaker值时，它肯定会获取正确的对象，并且我还确认newOption值包含有效的<option>对象，但它是没有正确添加到列表中。

有人可以在这里指出我的愚蠢吗？

提前致谢！

编辑：看起来这是因为此网站使用了Zurb Foundation的自定义样式下拉列表。它似乎是在加载时复制原始列表，因此新项目不会添加到复制列表中。我正在调查这个问题，但这肯定是我问题的原因。

编辑2 * ：由于this page，我找到了修复程序。似乎触发'更改'会迫使Foundation重建列表：

$('#entryspeaker').change();

Answer 1

使用您的代码正确添加它。Here是JS小提琴

我使用下面的数组

var speakerlist=[{id:"1", name:"Rsquare"}, {id:"2", name:"Adi"}, {id:"3", name:"Anuj"}];

您是否面临任何具体问题？我使用了chrome和IE9，它似乎工作正常。

使用jquery无法正常工作添加下拉选项

1 个答案: