HTML5：如何爲一個datalist獲取多個select元素？

Question

我試圖讓兩個「<select>單一水果」元素獲得一個<datalist>元素列表。

由於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元素不能自閉：
   • WRONG：<select id='fruits' />
   • 正確：<select id='fruits'></select>

這樣就可以使雙方選擇通過給選擇元素結束標籤出現在你的小提琴，但他們將是空的，因爲數據列表僅適用於輸入元素。

偏離主題，但對於使用引導程序格式，<label>元素應位於<div class="controls">部分之前。

Answer 2

多重屬性的工作......但只有INPUT TYPE =「電子郵件」，只有在少數的瀏覽器（希望有更多的很快就會來臨） - >multiple selections with datalist