动态 HTML5 数据列表
Posted
技术标签:
【中文标题】动态 HTML5 数据列表【英文标题】:Dynamic HTML5 Datalist 【发布时间】:2013-04-07 11:51:06 【问题描述】:所以我在让我的 html5 数据列表从 javascript 数组中动态填充时遇到了一点问题,该数组是从通过 mysql 数据库中的行填充的对象的键值填充的。呸!
MySQL 数据库 => 表 => 行 => JSON => Javascript 对象 => "firstname" & "lastname" key => 名字数组 => Datalist 选项。
我成功创建了名称数组:
var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"]; //Example of my array
并设置一个循环将它们附加到数据列表中:
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 & Last Name" id="name" name="name"></input>
<datalist id="potentials">
</datalist>
为什么没有填充?
【问题讨论】:
【参考方案1】:我知道这个答案很晚,但它可能会对某人有所帮助。
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】:少了一个撇号,试试:
$('#potentials').append("<option value='" + nameArray[i] + "'>");
【讨论】:
【参考方案3】:试试 $("datalist#potentials).append...
【讨论】:
以上是关于动态 HTML5 数据列表的主要内容,如果未能解决你的问题,请参考以下文章
video.js 使用数据库中的 json 创建动态播放列表
如何使用 jQuery 将 Kendo DropDownList 动态添加到 html5 表中