如何在HTML中創建可編輯的下拉列表?



Answers

您可以通過在HTML5中使用<datalist>標記來完成此操作。

<input type="text" name="product" list="productName"/>
<datalist id="productName">
    <option value="Pen">Pen</option>
    <option value="Pencil">Pencil</option>
    <option value="Paper">Paper</option>
</datalist>

如果雙擊瀏覽器中的輸入文本,將出現一個帶有定義選項的列表。

Question

我想用下拉列表創建一個文本字段,讓用戶選擇一些預定義的值。 用戶還應該能夠輸入一個新的值,或者從下拉列表中選擇一個預定義的值。 我知道我可以使用兩個小部件,但在我的應用程序中,如果它是統一在一個小部件中,那麼它將更符合人體工程學。

有沒有一個標準的部件或我必須使用第三方的JavaScript?

瀏覽器可移植性如何?







<select>標籤只允許使用預定義的條目。 您的問題的典型解決方案是有一個條目標記為“其他”和禁用的編輯字段( <input type="text" )。 僅當選擇“其他”時才添加一些JavaScript以啟用編輯字段。

有可能以某種方式創建允許直接編輯的下拉菜單,但不值得這個努力。 如果是的話,亞馬遜,谷歌或微軟將這樣做;-)只需要用最簡單的解決方案完成工作。 它更快(你的老闆可能會喜歡這樣),通常更容易維護(你可能會喜歡這樣)。




不幸的是,一個組合框不在HTML規範中。

管理它的唯一方法,不幸的是,推出自己的或使用預先建立的。 這個看起來很簡單。 我使用這個開放源代碼的應用程序,但不幸的是,你必須支付商業用途。




Links