jQuery中select與datalist制作下拉菜單時的區(qū)別淺析

更新時間：2016年12月30日 13:58:20 作者：Doulvme

一般我們通常使用select制作下拉菜單，但是H5之后，datalist也可以充當select的角色，而且兩者還有一點小的不同。具體區(qū)別詳解小編通過本文給簡單介紹下

一般我們通常使用select制作下拉菜單，但是H5之后，datalist也可以充當select的角色，而且兩者還有一點小的不同。

對于select來說，select的下拉菜單是供用戶選擇的，用戶只能選擇其中的選項不能自己添加。

但是datalist就不同了，datalist不僅可以供用戶選擇，用戶還可以自己輸入，而且datalist還可以達到模糊匹配的效果，使用很方便。

據(jù)代碼示例如下：

<input type="text" list="addr"/> 
      <datalist id="addr"> 
        <option value="上海">上海</option> 
        <option value="北京">北京</option> 
        <option value="杭州">杭州</option> 
      </datalist> 
       
      <select> 
        <option value="上海">上海</option> 
        <option value="北京">北京</option> 
        <option value="杭州">杭州</option> 
      </select>

運行結果如下：

以上所述是小編給大家介紹的jQuery中select與datalist制作下拉菜單時的區(qū)別，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

jQuery插件Tmpl的簡單使用方法
JavaScript 也可以利用模版來解決這些問題，比如基于 jQuery 的 jquery.tmpl，現(xiàn)在已經被接受為官方的模版插件了。詳細的 API 在 jQuery 的 Templates 里，內置的 demo 也盡情地演示了各種用法。
2015-04-04
jquery序列化表單去除指定元素示例代碼
這篇文章主要介紹了如何使用jquery序列化表單去除指定元素,需要的朋友可以參考下
2014-04-04
jQuery中:visible選擇器用法實例
這篇文章主要介紹了jQuery中:visible選擇器用法,實例分析了:visible選擇器的功能、定義及匹配操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2014-12-12
關于input全選反選惡心的異常情況
這篇文章主要介紹了關于input全選反選惡心的異常情況的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
實例詳解jQuery表單驗證插件validate
validate插件是一個基于jquery的表單驗證插件了里面有許多的常用的一些驗證方法我們可以直接調用，具體的我們一起來看看
2016-01-01
jcrop基本參數(shù)一覽
Jcrop是基于JQuery的圖片裁剪插件，這里簡單介紹下基本參數(shù)，需要的朋友可以參考下
2013-07-07
基于jQuery和CSS3制作響應式水平時間軸附源碼下載
我們經?？吹接泻芏嗟拇怪睍r間軸用來記錄事件進展，而有朋友問我要求分享水平的時間軸，其實水平時間軸的難點在于自適應屏幕尺寸。那么今天我要給大家分享的是一款支持響應式、支持觸屏手勢滑動的水平時間軸
2015-12-12
淺談jQuery before和insertBefore的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery before和insertBefore的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
jQuery實現(xiàn)tab選項卡效果的方法
這篇文章主要介紹了jQuery實現(xiàn)tab選項卡效果的方法,實例分析了jquery實現(xiàn)tab選項卡切換效果的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
一款由jquery實現(xiàn)的整屏切換特效
一款jquery實現(xiàn)的整屏切換特效，在右側有圓型小標，每點一個切換一屏。當然，你也可以滾動鼠標來切換頁面
2014-09-09