是否可以在多个元素上重用数据列表？答案

【问题标题】：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？

标签： html css datalist

【解决方案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>

【讨论】：