动态HTML5 Datalist

时间:2013-04-15 11:23:50

标签: jquery html5 for-loop append html-datalist

所以我有一个问题是让我的HTML5 Datalist从javascripi数组中动态填充,该数组是通过MySQL数据库中的行填充的对象的键的值填充的。呼!

MySQL数据库=>表=>行=> JSON => Javascript Objects => “名字”& “lastname”key =>名字数组=> Datalist Options。

我成功创建了名字数组:

var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"]; //Example of my array

并设置一个循环来。将它们添加到datalist:

for (var i = 0; i < nameArray.length; i++) {
    alert(i + " - " + nameArray[i]); //Works Fine, "0 - Rick Bross", "1 - Madison Smith", etc.
    $('#potentials').append("<option value='" + nameArray[i] + ">"); // Not working.
}

这是我的HTML:

<input tabindex='1' list="potentials" type="text" placeholder="First &amp; Last Name" id="name" name="name"></input>
<datalist id="potentials">
</datalist>

有谁知道为什么这不会填充?

3 个答案:

答案 0 :(得分:9)

缺少撇号,请尝试:

$('#potentials').append("<option value='" + nameArray[i] + "'>");

答案 1 :(得分:4)

我知道这个答案来晚了,但可能会对某人有所帮助。

var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"];

向数据列表添加选项。
-如果需要i.d来识别每个选项,“ attr”会有所帮助。
-“文本”是要显示的内容。

$.each(nameArray, function(i, item) { $("#potentials").append($("<option>").attr('value', i).text(item)); });

答案 2 :(得分:-5)

尝试$(“datalist #potals”.append ...