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

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

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

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

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