Question

我有大约50个字段的表单，应该有相同的选项供用户选择。我正在寻找HTML5中的datalist。看起来很不错，因为它为用户提供了从列表中键入所需选项的选项。我想知道是否有一个选项可以将相同的数据列表应用于所有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>

上面的代码将生成datalist，其中只有一个字段的选项。另外我在datalist上设置了宽度，但是一旦点击我的输入字段，我仍然会看到更多的宽度。我想datalist宽度匹配输入字段宽度（size = 2）。如果有人知道如何实现这一目标，请告诉我。我也愿意接受任何建议。

Answer 1

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

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

检查这个小提琴：https://jsfiddle.net/yfd5c2nw/3/

Answer 2

datalist使用ID，并且没有其他方法将列表与输入字段连接。

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

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

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

干杯。

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

2 个答案: