【特别推荐】几款极好的 JavaScript 下拉列表插件-阿里云开发者社区

开发者社区> 秋天风景> 正文

【特别推荐】几款极好的 JavaScript 下拉列表插件

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

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

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

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery插件制作 -- 2.图片走廊:gallery
  本文主要内容是讲解图片走廊-gallery的实现。   首先创建jquery.gallery.js的插件文件,构建程序骨架。 (function ($) {   $.fn.gallery = function () {     return this.
798 0
javascript日历插件
原文:javascript日历插件 javascript日历插件       最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一大把的日历控件,但是没有几个是自己想要的,虽然效果是实现了,但是看他们的源码,头有点大,所以自己也在研究这方面的东西。
1113 0
6个强大的JavaScript日期操作插件(翻译)
我们必须承认,JavaScript内建的Date方法实在是太基础了,远不够我们来处理日期。总有人会开发自己的JavaScript日期操作库,为何在能够使用已经开发并测试好的日期插件时还要再自己造个轮子呢。
603 0
Parallax.js – 自适应智能设备方向的视差效果插件
  Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替。有很多的行为,你就可以设置为任何给定的视差实例。
1006 0
超全超实用的Javascript类库和jQuery插件大全之一:Web印刷排版
日期:2012-10-9  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。
1179 0
超全超实用的Javascript类库和jQuery插件大全之一:图片,地图和图形
日期:2012-10-10  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现。这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率。
1309 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2394
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载