是否可以在多个元素上重用数据列表？
Posted
技术标签:
【中文标题】是否可以在多个元素上重用数据列表？【英文标题】：Is it possible to reuse a datalist on multiple elements? 【发布时间】：2014-08-19 23:06:46 【问题描述】：我已经定义好了，放在<head>标签里：
<datalist id="colors">
<option>#ff0000</option> <!-- red -->
<option>#FF5100</option> <!-- red orange -->
<option>#FF7F00</option> <!-- orange -->
<option>#FFBE00</option> <!-- yellow orange -->
<option>#FFFF00</option> <!-- yellow -->
<option>#C0FF00</option> <!-- yellow green -->
<option>#00FF00</option> <!-- green -->
<option>#007F7F</option> <!-- Blue Green -->
<option>#0000FF</option> <!-- Blue -->
<option>#5C00FF</option> <!-- Blue Violet -->
<option>#7F00FF</option> <!-- Violet -->
<option>#BF007F</option> <!-- Red Violet -->
<option>#FFFFFF</option> <!-- White -->
<option>#DADADA</option> <!-- Gray1 -->
<option>#B6B6B6</option> <!-- Gray2 -->
<option>#929292</option> <!-- Gray3 -->
<option>#6D6D6D</option> <!-- Gray4 -->
<option>#494949</option> <!-- Gray5 -->
<option>#242424</option> <!-- Gray6 -->
<option>#000000</option> <!-- Black -->
</datalist>
它似乎有效，但我收到错误：
Unexpected end tag (head) - ignored.
我应该把它放在哪里？
【问题讨论】：
为什么要把它放在<head>标签中？将其添加到<body>
因为我不知道把它放在哪里。
您应该将它准确地放置在您希望它出现在文档中的位置......在 之间，并且可能应该为这些选项添加值。
谢谢。出于某种原因，我认为它必须在体外才能重复使用。
只是出于好奇：什么组件返回此错误？我知道浏览器会在调试环境中报告 javascript 错误，但是 html？
【参考方案1】：
首先回答标题中的问题：是的，您可以在多个控件中使用相同的datalist 元素，通过在不同的input 元素中使用其id 属性值，例如
<datalist id="colors">...</datalist>
<label for="car">Color of your car:</label> <input type="color" id="car" list="colors">
<label for="tie">Color of your tie:</label> <input type="color" id="tie" list="colors">
关于“我应该把它放在哪里？”的问题，HTML5 LC 提到了datalist：
可以使用此元素的上下文： 需要措辞内容的地方。
这意味着文档body 中的几乎任何地方，但不在head 中。如果使用得当，它的位置并不重要，因为它不会生成任何可见的内容。你可以把它，例如在引用它的第一个 input 元素之前（或之后），或者，如果您愿意，在 body 的开头或结尾处。
然而，if 使用<option>#ff0000</option> 之类的标记，与<option value="#ffff00"> 相反，在这种情况下，放置很重要，因为现在有可见的内容（字符串#ff0000）。在不支持 datalist 元素的旧浏览器上，此类内容将显示在您放置元素的位置。
如果您使用<input type="color">，这似乎很可能，那么您应该考虑在不支持该元素类型的 IE 上会发生什么。问题是足够新版本的 IE 支持 datalist，但即使 IE 11 仍然实现 <input type="color"> as a simple text box,. This means that the user, on clicking element, would see a dropdown list of color codes like #FF0000. For this reason, unless IE is irrelevant, you should specify a visible name for the color in alabel` 属性，例如
<option value="#ff0000" label="red">
<option value="#FF5100" label="red orange">
在这种方法中，datalist 元素仍然可以放置在body 内的几乎任何位置，并且可以被多个input 元素引用。
【讨论】：
出色的答案！谢谢【参考方案2】：不是每个选项都使用
<option>...</option> 但<option value="...">
【讨论】：
谢谢。有道理！ 这可能是有用的信息，但它不能解决所提出的问题。【参考方案3】：我已经在这些浏览器中运行了下面的骨架 sn-p：
Chrome 35 Mac -> 运行良好 Mozilla 30 Mac -> 工作正常，但没有列表控件，只有裸输入字段 IE 11 -> 工作正常，没有列表控件。 从 IE 9 向下，页面会被打乱。 Safari 7.0.4 无法处理它，它没有显示列表。可能还需要一些其他细节。所以你的错误可能来自另一个方面。
根据 HTML5 规范，应在放置“短语内容”的位置使用该元素。 http://www.w3.org/TR/html5/forms.html#the-datalist-element。这是文档的文本，正如我所看到的，<body>:http://www.w3.org/TR/html5/dom.html#phrasing-content-1
编辑： 有时去优秀的 ol' W3 验证器很有用：http://validator.w3.org/check
如果我将datalist 放在头部，验证器会报告有关“偏离头部末端标签”的信息。所以这应该是问题的根源之一。
片段：
<html>
<head>
<datalist id="colors">
<option>#ff0000</option> <!-- red -->
<option>#FF5100</option> <!-- red orange -->
<option>#FF7F00</option> <!-- orange -->
<option>#FFBE00</option> <!-- yellow orange -->
<option>#FFFF00</option> <!-- yellow -->
<option>#C0FF00</option> <!-- yellow green -->
<option>#00FF00</option> <!-- green -->
<option>#007F7F</option> <!-- Blue Green -->
<option>#0000FF</option> <!-- Blue -->
<option>#5C00FF</option> <!-- Blue Violet -->
<option>#7F00FF</option> <!-- Violet -->
<option>#BF007F</option> <!-- Red Violet -->
<option>#FFFFFF</option> <!-- White -->
<option>#DADADA</option> <!-- Gray1 -->
<option>#B6B6B6</option> <!-- Gray2 -->
<option>#929292</option> <!-- Gray3 -->
<option>#6D6D6D</option> <!-- Gray4 -->
<option>#494949</option> <!-- Gray5 -->
<option>#242424</option> <!-- Gray6 -->
<option>#000000</option> <!-- Black -->
</datalist>
</head>
<body>
<input list="colors" />
</body>
</html>
【讨论】：
以上是关于是否可以在多个元素上重用数据列表？的主要内容，如果未能解决你的问题，请参考以下文章
是否允许在 RecyclerView 上投放多个 AdMob 广告？另类广告网络？
具有 set Input() 任何类型的可重用组件是一个好习惯吗？