表单元素让人爱恨交加。作为网页最重要的组成部分，表单几乎无处不在，从简单的邮件订阅、登陆注册到复杂的需要多页填写的信息提交功能，表单都让开发者花费了大量的时间和精力去处理，以期实现好用又漂亮的表单功能。这篇文章分享几款很棒的 JavaScript 下拉列表功能增强插件。

您可能感兴趣的相关文章

Selectize.js

Selectize 是一个基于 jQuery 的 <select> UI 控件，对于标签选择和下拉列表功能非常有用。

Selectize 的目标是通过简单而强大的 API 提供坚实可用的用户体验。

主要特色：

  • 简洁的 API，有详细的帮助文档；
  • 支持智能排序和多属性搜索，甚至可以使用打分函数进行排序的；
  • 支持键盘操作，对用户使用友好；
  • 支持同时选择和删除多个项目；
  • 支持远程数据加载，例如 Ajax 调用；

使用示例：

单选选择

$('#select-beast').selectize({

    create: true,

    sortField: 'text'

});

多项选择

$('#select-state').selectize({

    maxItems: 3

});　

插件下载      在线演示

FancySelect

FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择。

FancySelect 使用方便，只要绑定页面上的任何 Select 元素，并调用就 .fancySelect() 就可以了。

默认情况下，FancySelect 在移动设备上使用原生的选择功能和风格。

使用示例：

<select class="basic">

    <option value="">Select something…</option>

    <option>Lorem</option>

    <option>Ipsum</option>

    <option>Dolor</option>

    <option>Sit</option>

    <option>Amet</option>

</select>

$('.basic').fancySelect();

插件下载      在线演示

Chosen

Chosen 是最流行的 jQuery 选择功能插件，也是我最喜欢，最好用的一个！

Chosen 可以帮助你轻松构建用户友好的漂亮选择功能，可以把多选转换为基于标签的输入域。

特色功能：

  • 用户友好的下拉选择功能，支持搜索；
  • 基于标签的多项选择功能；
  • 支持设置选中和无效选项；
  • 支持修改和更新事件；

使用示例：

隐藏搜索的单选功能

$(".chosen-select").chosen({disable_search_threshold: 10});

设置多选的最大选择数

$(".chosen-select").chosen({max_selected_options: 5});

监听更新事件

$("#form_field").chosen().change( … );

手动触发更新

$("#form_field").trigger("chosen:updated");　

自定义宽度

$(".chosen-select").chosen({width: "95%"});

插件下载      在线演示

DropKick

DropKick 可以帮助你把已有的烦人的 <select> 列表转换为漂亮的，可定制的下拉菜单。

使用示例：

默认调用

$('.default').dropkick();

自定义更新事件

$('.change').dropkick({

  change: function (value, label) {

    alert('You picked: ' + label + ':' + value);

  }

});

自定义皮肤

$('.custom_theme').dropkick({

  theme: 'black',

  change: function (value, label) {

    $(this).dropkick('theme', value);

  }

});　

插件下载      在线演示

ddSlick

这款免费、轻量的 jQuery 选择功能插件让你可以轻松创建带有图片和描述的自定义下拉菜单。

使用示例：

使用 JSON 数据

$('#demoBasic').ddslick({

    data: ddData,

    width: 300,

    imagePosition: "left",

    selectText: "Select your favorite social network",

    onSelected: function (data) {

        console.log(data);

    }

});

获取选中项

$('#demoShowSelected').ddslick({

    data: ddData,

    selectText: "Select your favorite social network",

});

$('#showSelectedData').on('click', function () {

    var ddData = $('#demoShowSelected').data('ddslick');

    displaySelectedData("2: Getting Selected Dropdown Data" , ddData);

});

设置选中项

$('#demoSetSelected').ddslick({

    data: ddData,

    selectText: "Select your favorite social network"

});

$('#btnSetSelected').on('click', function () {

    var i = $('#setIndex').val();

    if(i >= 0 && i <5)

       $('#demoSetSelected').ddslick('select', {index: i });

    else

       $('#setIndexMsg').effect('highlight',2400);

});

插件下载      在线演示

Select2

Select 2 是一款用于替代传统的网页下拉框的 jQuery 插件，支持搜索、远程数据和无限滚动等功能。

使用示例：

<head>

    <link href="select2.css" rel="stylesheet"/>

    <script src="select2.js"></script>

    <script>

        $(document).ready(function() { $("#e1").select2(); });

    </script>

</head>

<body>

    <select id="e1">

        <option value="AL">Alabama</option>

        ...

        <option value="WY">Wyoming</option>

    </select>

</body>

插件下载      在线演示

您可能感兴趣的相关文章

本文链接：推荐几款很棒的 JavaScript 下拉列表功能增强插件

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

【特别推荐】几款极好的 JavaScript 下拉列表插件的更多相关文章

  1. 【精心推荐】几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  2. 几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  3. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  4. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  5. 推荐15款创建漂亮幻灯片的 jQuery 插件

    对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插 ...

  6. 推荐六款炫酷的HTML5效果插件

    1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...

  7. 推荐10 款 SVG 动画的 JavaScript 库

    SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库 ...

  8. 推荐6款极具个性化的在线生成logo的网站

    http://www.douban.com/group/topic/10434724/

  9. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

随机推荐

  1. jQuery事件流的顺序

    <div id="aaron"> <div id='test'> <ul> <p>点击p被委托,ul被阻止了,因为内部重写了事件对象 ...

  2. WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。

    WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 jquery (区分大小写)的 ScriptRes ...

  3. javascript中数组和字符串的方法比较

    × 目录 [1]可索引 [2]转换 [3]拼接[4]创建[5]位置 前面的话 字符串和数组有很多的相同之处,它们的方法众多,且相似度很高:但它们又有不同之处,字符串是不可变值,于是可以把其看作只读的数 ...

  4. 云计算之路-阿里云上：Web服务器遭遇奇怪的“黑色30秒”问题

    今天下午访问高峰的时候,主站的Web服务器出现奇怪的问题,开始是2台8核8G的云服务器(ECS),后来又加了1台8核8G的云服务器,问题依旧. 而且3台服务器特地使用了不同的配置:1台是禁用了虚拟内存 ...

  5. Spark入门实战系列--3.Spark编程模型（上）--编程模型及SparkShell实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Spark编程模型 1.1 术语定义 l应用程序(Application): 基于Spar ...

  6. 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误

    在visual studio 中添加数据库应用时,报错,提示如下: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL ...

  7. 【原创】利用typeface实现不同字体的调用显示及String转换为Unicode

    最近工作用到,就写个小demo demo实现从assets中利用typeface调用不同字体,并在editText中显示出来 1.layout中创建activity_main.xml文件 布局代码如下 ...

  8. ansible写一个简单的playbook

    前言 实现的功能很简单,就是通过ansible批量完成某个账户sudo权限的开通或关闭 目录结构 ├── group_vars #放置各种变量的目录,我这里没用 ├── hosts #主机和组配置,默 ...

  9. 语义化HTML：ul、ol和dl

    一.语义化元素   1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in wh ...

  10. 127.0.0.1\SQLEXPRESS连接异常

    当你的数据库为SQLEXPRESS时,在程序的数据库连接字符串的服务Server使用127.0.0.1\SQLEXPRESS时,如下: 它会显示一异常: Server Error in '/' App ...