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

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

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

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

對(duì)于select來(lái)說(shuō)，select的下拉菜單是供用戶選擇的，用戶只能選擇其中的選項(xiàng)不能自己添加。

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

據(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>

運(yùn)行結(jié)果如下：

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

您可能感興趣的文章:

相關(guān)文章

jQuery的ready方法實(shí)現(xiàn)原理分析
這篇文章主要介紹了jQuery的ready方法實(shí)現(xiàn)原理分析的相關(guān)資料,需要的朋友可以參考下
2016-10-10
jquery表單驗(yàn)證插件validation使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery表單驗(yàn)證插件validation使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
jQuery實(shí)現(xiàn)朋友圈查看圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)朋友圈查看圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端示例代碼
這篇文章主要介紹了JQuery如何以JSON方式提交數(shù)據(jù)到服務(wù)端,需要的朋友可以參考下
2014-05-05
jQuery實(shí)現(xiàn)的類flash菜單效果代碼
這里要說(shuō)的就是一個(gè)菜單的hover的效果，一般我們通過CSS的偽類:hover實(shí)現(xiàn)的菜單切換都比較單調(diào)，因?yàn)閮H僅是一個(gè)簡(jiǎn)單的圖片的變化，不像很多flash菜單一樣變化非常的平滑，但是這里我們就是要用非flash的技術(shù)實(shí)現(xiàn)一個(gè)平滑的hover效果。
2010-05-05
使用JQUERY Tabs插件宿主IFRAMES
這篇文章提供了一個(gè)使用asp.net和JQuery UI Tabs plug-in用IFRAME元素去宿主web頁(yè)面。
2010-01-01
自己動(dòng)手制作jquery插件之自動(dòng)添加刪除行功能介紹
這個(gè)插件的上篇訪問量很不好，幾乎是我寫的文章里最少的點(diǎn)擊量的了，不知道是不是因?yàn)榇蠹覍?duì)我說(shuō)的這個(gè)插件不感興趣還是說(shuō)我寫的東西技術(shù)含量太差了，呵，那我只能孤芳自賞了
2011-10-10
基于JQuery實(shí)現(xiàn)圖片上傳預(yù)覽與刪除操作
這篇文章主要為大家詳細(xì)介紹了基于JQuery實(shí)現(xiàn)圖片上傳預(yù)覽與刪除操作的相關(guān)代碼，感興趣的小伙伴們可以參考一下
2016-05-05
jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
jquery獲取div寬度的實(shí)現(xiàn)思路與代碼
DIV的width寬度如何獲取呢？接下來(lái)介紹使用jquery獲取DIV的width寬度，感興趣的朋友可以了解下的
2013-01-01