如何使用HTML5中的datalist並使用jquery獲取值

2019-12-11 09:24:42

在HTML5中，新加了一個標籤datalist，這個標籤是定義選項列表。datalist元素需要使用input標籤元素結合使用，這個標籤跟select下拉框很相似。下面利用一個範例講述datalist標籤的用法，操作如下：

第一步，在HBuilder工具中，新建datalist.html靜態頁面；然後引入jquery核心檔案，如下圖所示：

第二步，在<body></body>標籤元素內，插入一個input和datalist標籤，如下圖所示：

第三步，儲存程式碼並在瀏覽器中，檢視介面效果，可以發現類似一個下拉框，如下圖所示：

第四步，點選datalist標籤，會發現出現下拉框中的選項，效果與下拉框一樣，如下圖所示：

第五步，接著在<script></script>標籤內，獲取datalist標籤的ID，獲取change事件，如下圖所示：

第六步，再次儲存程式碼並檢視介面效果，並切換datalist標籤元素，檢視對應的值，如下圖所示：