表单元素让人爱恨交加。作为网页最重要的组成部分，表单几乎无处不在，从简单的邮件订阅、登陆注册到复杂的需要多页填写的信息提交功能，表单都让开发者花费了大量的时间和精力去处理，以期实现好用又漂亮的表单功能。这篇文章分享几款很棒的 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. 浏览器端获取局域网IP地址，本机的MAC，以及机器名

    原文链接:http://www.orlion.ga/59/ 只针对IE且客户端的IE允许AcitiveX运行 code: <html> <head> <title> ...

  2. PHP 对象 “==” 与 “===”

    php中对象在内存中的存储方式与java等其他面向对象语言类似,$a = new Person();在内存中表现为$a是堆区中new Person()中的引用 这样当: $a = new Person ...

  3. HTML5第一讲

    第一回合:什么是HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTM ...

  4. javascript学习8

    JavaScript 浏览器检测 实例 检测浏览器及版本 使用 JavaScript 检测关于访问者的浏览器名称及其版本. 检测浏览器的更多信息 使用 JavaScript 检测关于访问者浏览器的更多 ...

  5. Maven提高篇系列之（六）——编写自己的Plugin（本系列完）

    这是一个Maven提高篇的系列,包含有以下文章: Maven提高篇系列之(一)——多模块 vs 继承 Maven提高篇系列之(二)——配置Plugin到某个Phase(以Selenium集成测试为例) ...

  6. .net请求Webservice简单实现天气预报功能

    很久没有接触Webservice的知识,今天稍微复习了一下关于webservice,简单做了一个天气预报的功能,虽然界面丑的厉害,但功能算是实现了,以下是效果展示. 这东西没什么难点,只是天气预报的功 ...

  7. C#中简单的继承和多态

    今天我们来聊一聊继承,说实话今天也是我第一次接触. 继承的概念是什么呢?就是一个类可以继承另一个类的属性和方法(成员) 继承是面向对象编程中的一个非常重要的特性. 好了,废话不多说,下面切入正题: 1 ...

  8. Error: pathspec '*' did not match any file(s) known to git.

    git切换分支报错 error: pathspec 'develop' did not match any file(s) known to git. 解决办法如下: plumm@MACY-PC MI ...

  9. 15天玩转redis —— 第一篇 开始入手

    双十一终于还是过去了,我负责的mongodb由于做了副本集,最终还是挺过去了,同事负责的redis,还是遗憾的在早上8点左右宕机了,然后大家就是马不停 蹄的赶往公司解决问题,因为我对redis也不是很 ...

  10. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...