HTML5：如何为一个数据列表获取多个选择元素？

Question

我试图让一个<datalist>元素列出两个“<select>一个水果”元素的水果。

鉴于html：

Select one fruit: <select type="text" name="fruit1" list="fruits"></select>
Select a second fruit: <select type="text" name="fruit2" list="fruits"></select>

<datalist id="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
</datalist>

包含第二个<select> break my code (fiddle demo)。 如何处理以使两者都在同一个数据列表（或类似的值列表）上工作。

---

修改： <select />更正为<select></select>（@richard）

Answer 1

您的样本存在许多错误：

1. datalist位于input内，而不是select（source）
2. select元素不能自动关闭：
   • 错误：<select id='fruits' />
   • 正确：<select id='fruits'></select>

因此，您可以通过给出选择元素结束标记来使两个选择出现在您的小提琴中，但它们将为空，因为数据列表仅适用于输入元素。

关闭主题，但是对于使用引导格式，<label>元素应该位于<div class="controls">部分之前。

Answer 2

多个属性正在运行...但仅限于输入类型=“电子邮件”，并且仅在少数浏览器中（希望更多内容即将推出） - ＆gt; multiple selections with datalist