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

Question

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

$(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

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

<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/