动态HTML5数据列表

Dynamic HTML5 Datalist(动态HTML5数据列表)

问题描述

因此，让HTML5数据列表从javascript数组动态填充时遇到了一些问题，该javascript数组是由通过MySQL数据库中的行填充的对象的键值填充的。呼！

MySQL Database=>；Table=>；Rows=>；JSON=>；Javascript Objects=>；Firstname&Quot；&；&Quot；Lastname&Quot；Key=>；Array of First Name=>；dataList选项。

我成功创建了名称数组：

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>

为什么没有填充？

推荐答案

我知道此答案晚了，但它可能对某人有帮助。

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

向数据列表添加选项。
-如果您需要身份证来识别每个选项，"attr"会有所帮助。
-"text"为要显示的内容。

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

这篇关于动态HTML5数据列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！