jQuery 动态 HTML5 数据列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16013933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic HTML5 Datalist
提问by Rick Bross
So I am having a bit of an issue getting my HTML5 Datalist to populate dynamically from a javascripi array that is being populated from values of a key of an object that is being populated via rows in a MySQL database. Phew!
所以我在让我的 HTML5 数据列表从 javascripi 数组动态填充时遇到了一些问题，该数组是从一个对象的键值填充的，该对象的键值通过 MySQL 数据库中的行填充。呼！
MySQL Database => Table => Rows => JSON => Javascript Objects => "firstname" & "lastname" key => Array of first names => Datalist Options.
MySQL 数据库 => 表 => 行 => JSON => Javascript 对象 => “名字”和“姓氏”键 => 名字数组 => 数据列表选项。
I successfully created the Array of names:
我成功创建了名称数组：
var nameArray = ["Rick Bross","Madison Smith","Hyman Johnson"]; //Example of my array
And set up a loop to .append them to the 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.
}
Here is my HTML:
这是我的 HTML：
<input tabindex='1' list="potentials" type="text" placeholder="First & Last Name" id="name" name="name"></input>
<datalist id="potentials">
</datalist>
Does anyone know why this isn't populating?
有谁知道为什么这不填充？
采纳答案by King Of The Jungle
I know this answer is late but it might help someone.
我知道这个答案来晚了，但它可能对某人有所帮助。
var nameArray = ["Rick Bross","Madison Smith","Hyman Johnson"];
var nameArray = ["Rick Bross","Madison Smith","Hyman Johnson"];
Add options to the datalist.
- "attr" helps if you need an i.d to identify each option.
- "text" is the content to be displayed.
向数据列表添加选项。
- 如果您需要一个 id 来识别每个选项，“attr”会有所帮助。
- "text" 是要显示的内容。
$.each(nameArray, function(i, item) {
$("#potentials").append($("<option>").attr('value', i).text(item));
});
$.each(nameArray, function(i, item) {
$("#potentials").append($("<option>").attr('value', i).text(item));
});
回答by kuncajs
There was a missing apostrophe, try:
缺少撇号，请尝试：
$('#potentials').append("<option value='" + nameArray[i] + "'>");
回答by Andrew Traub
Try $("datalist#potentials).append...
试试 $("datalist#potentials).append...
