如何为表单上的多个输入字段创建数据列表？ HTML5

Question

我有大约 50 个字段的表单，用户应该有与 select 相同的选项。我正在查看 HTML5 中的数据列表。看起来不错，因为它为用户提供了从列表中输入所需选项的选项。我想知道是否有一个选项可以将相同的数据列表应用于所有 50 个字段。到目前为止我发现的只有示例使用 id 属性。有没有办法用 JQuery/Javascript 创建它并将相同的 class 应用于所有字段？我试过但没有用，我的输入字段是空的，控制台中没有错误。这是我的例子：

$(document).ready(function () {
     for(var i=0; i <= 120; i+=5){
      $('#hzIntervals').append("<option value='" + i + "'>");
     }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="hzIntervals" size="3" />
<datalist id="hzIntervals" style="width:20px;"></datalist>

以上代码将生成仅针对一个字段的选项的数据列表。我还在数据列表上设置了宽度，但是一旦我点击我的输入字段，我仍然会看到更多的宽度。我希望数据列表宽度与输入字段宽度相匹配（大小=2）。如果有人知道如何实现这一目标，请告诉我。我也愿意接受任何建议。

Answer 1

数据列表与 ID 一起使用，没有其他方法将列表与输入字段连接起来。

但是，您可以更改脚本以使用所有数据列表，但请记住，每个输入和数据列表都必须具有唯一 ID。

$(document).ready(function () {
    for(var i=0; i <= 120; i+=5){
        $('datalist').append('<option value="'+i+'">');
    };
});

看看https://fiddle.jshell.net/d5xjczvc/

干杯。

Answer 2

所有输入字段都指向同一个数据列表。所以只需将具有相同值的列表属性添加到您的所有字段：

<input type="text" list="hzIntervals" size="3" />
<input type="text" list="hzIntervals" size="5" />
<datalist id="hzIntervals" style="width:20px;"></datalist>

检查此 fiddle：https://jsfiddle.net/yfd5c2nw/3/

如何为表单上的多个输入字段创建数据列表？ HTML5

How to create data-list for multiple input fields on the form? HTML5

html

javascript

css

jquery

html-datalist