html5-datalist標籤-定義選項列表
阿新 • • 發佈：2021-01-16
datalist使用
datalist使用需與input關聯起來，input定義list屬性，同時datalist定義id屬性，兩者的值必須相同。
例項程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>datalist定義選項列表</title> </head> <body> <div> <input type="text" value="預設值" list="fruit"> <datalist id="fruit"> <option>西瓜</option> <option>香蕉</option> <option>草莓</option> <option>橘子</option> </datalist> </div> </body> </html>
實現效果
- 預設
- 下拉列表
刪除“預設值”，點選“向下的箭頭”則可彈出
- 相關資料
當輸入資料列表中的一項部分資料時，則會彈出相應資料