jQuery中select与datalist制作下拉菜单时的区别浅析

一般我们通常使用select制作下拉菜单，但是H5之后，datalist也可以充当select的角色，而且两者还有一点小的不同。

对于select来说，select的下拉菜单是供用户选择的，用户只能选择其中的选项不能自己添加。

但是datalist就不同了，datalist不仅可以供用户选择，用户还可以自己输入，而且datalist还可以达到模糊匹配的效果，使用很方便。

据代码示例如下：

<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制作下拉菜单时的区别，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery插件datalist实现很好看的input下拉列表

    HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...).于是最近更据需求写了一个小型datalist插件,兼容到IE8(IE7应该没多少人用了吧?).实现的具体需求如下: 当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦),单击鼠标左键或者enter键将选中的列表的值输入到input框. 具体的实现代码如下:

  • CheckBoxList多选样式jquery、C#获取选择项

    复制代码 代码如下: .checkboxlist label { margin-right: 20px; } 复制代码 代码如下: var label; $("#ddlplatform input:checkbox:checked").each(function () { label += $(this).next().html(); }); 复制代码 代码如下: <asp:CheckBoxList ID="ddlplatform" runat="s

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

    本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

  • Jquery操作下拉框(DropDownList)实现取值赋值

    1. 获取选中项: 复制代码 代码如下: 获取选中项的Value值: $('select#sel option:selected').val(); 或者 $('select#sel').find('option:selected').val(); 获取选中项的Text值: $('select#seloption:selected').text(); 或者 $('select#sel').find('option:selected').text(); 2. 获取当前选中项的索引值: 复制代码 代码

  • asp.net使用jQuery获取RadioButtonList成员选中内容和值示例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • jquery ajax后台返回list,前台用jquery遍历list的实现

    如下所示: $.ajax({ type: 'post', url: "maintain_findRoomByBuildingId.shtml", cache: false, data: {"buildingId":buildingId}, dataType: 'json', success: function(data){ jQuery.each(data.roomList, function(i,item){ alert(item.id+","

  • jQuery接受后台传递的List的实例详解

    jQuery接受后台传递的List的实例详解 后台代码: @RequestMapping(params = "getUser") @ResponseBody public List<User> getUser(){ List<User> list = new ArrayList<>(); return list; } 前台代码: $.ajax({ type: "POST", url: "${pageContext.req

  • JqueryMobile动态生成listView并实现刷新的两种方法

    JqueryMobile动态生成listView并实现刷新的两种方法 复制代码 代码如下: function queryEntfernungen(tx, results)   alert("This Hello works");   var len = results.rows.length;     // This For works fine for (var i = 0; i < len; i++) {       $("div[data-role=content

  • jQuery中select与datalist制作下拉菜单时的区别浅析

    jQuery中select与datalist制作下拉菜单时的区别浅析

    一般我们通常使用select制作下拉菜单,但是H5之后,datalist也可以充当select的角色,而且两者还有一点小的不同. 对于select来说,select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加. 但是datalist就不同了,datalist不仅可以供用户选择,用户还可以自己输入,而且datalist还可以达到模糊匹配的效果,使用很方便. 据代码示例如下: <input type="text" list="addr"/>

  • jQuery实现的checkbox级联选择下拉菜单效果示例

    本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script language="JavaScript" src="jq

  • jQuery实现的精美平滑二级下拉菜单效果代码

    jQuery实现的精美平滑二级下拉菜单效果代码

    本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

  • jquery实现简单的二级导航下拉菜单效果

    jquery实现简单的二级导航下拉菜单效果

    本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl

  • php+jQuery实现的三级导航栏下拉菜单显示效果

    php+jQuery实现的三级导航栏下拉菜单显示效果

    本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果.分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array(

  • jQuery实现灰蓝风格标准二级下拉菜单效果代码

    jQuery实现灰蓝风格标准二级下拉菜单效果代码

    本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • jQuery+CSS 实现的超Sexy下拉菜单

    jQuery+CSS 实现的超Sexy下拉菜单

     如何实现 Step 1 HTML 复制代码 代码如下: <ul class="topmenu"> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul class="submenu1"> <li><a href="#&

  • css结合js制作下拉菜单示例代码

    复制代码 代码如下: <%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <HTML> <HEAD> <title>WebForm5</title> <style>/* Root = Horizontal, Secondary = Vertical */ ul#navmenu-h { margin: 0; b

  • jQuery中attr()和prop()在修改checked属性时的区别

    jQuery中attr()和prop()在修改checked属性时的区别

    在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr('checked',true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题. 百度了很久找到原因是HTML的属性分为attribute和property,暂且将后者称为特性. checked属性即分为attribute->checked,和property->true,false. 对于一个checkbox,若未定义checked="checked",aler

  • jQuery获取json后使用zy_tmpl生成下拉菜单

    第一次写关于AppCan开发的文章,有人写了关于jQuery或者原生Ajax与json的交互,那我就稍微写写我开发过程中使用jQuery获取json后使用zy_tmpl生成下拉菜单的实例吧. PHP服务端生成json的那部分就不写那么多了,就是输入一个数组$res,然后 复制代码 代码如下: echo $_GET['jsoncallback'] . "(" . json_encode($res) . ")"; 在AppCan的模版中,先加入一个下拉菜单,我的菜单是:

随机推荐