Selectize.js

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

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

主要特色：

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

使用示例：

单选选择

1
2
3
4
$('#select-beast').selectize({
    create: true,
    sortField: 'text'
});

多项选择

1
2
3
$('#select-state').selectize({
    maxItems: 3
});　

插件下载      在线演示

FancySelect

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

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

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

使用示例：

1
2
3
4
5
6
7
8
9
10
<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 可以帮助你轻松构建用户友好的漂亮选择功能，可以把多选转换为基于标签的输入域。

特色功能：

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

使用示例：

隐藏搜索的单选功能

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

设置多选的最大选择数

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

监听更新事件

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

手动触发更新

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

自定义宽度

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

插件下载      在线演示

DropKick

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

使用示例：

默认调用

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

自定义更新事件

1
2
3
4
5
$('.change').dropkick({
  change: function (value, label) {
    alert('You picked: ' + label + ':' + value);
  }
});

自定义皮肤

1
2
3
4
5
6
$('.custom_theme').dropkick({
  theme: 'black',
  change: function (value, label) {
    $(this).dropkick('theme', value);
  }
});　

插件下载      在线演示

ddSlick

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

使用示例：

使用 JSON 数据

1
2
3
4
5
6
7
8
9
$('#demoBasic').ddslick({
    data: ddData,
    width: 300,
    imagePosition: "left",
    selectText: "Select your favorite social network",
    onSelected: function (data) {
        console.log(data);
    }
});

获取选中项

1
2
3
4
5
6
7
8
9
$('#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);
});

设置选中项

1
2
3
4
5
6
7
8
9
10
11
12
$('#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 插件，支持搜索、远程数据和无限滚动等功能。

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

插件下载      在线演示

 

基于Jquery的下拉列表控件(个人觉得实用)的更多相关文章

  1. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  2. 模仿win10样式，基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  3. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  4. 前端关于 superSlide.js 使用，一款基于jquery的前端控件

    1引用jQuery.js 和 jquery.SuperSlide.js 2 编写HTML ** 以下是默认的HTMl结构,分别是 ".hd" 里面包含ul, ".bd&q ...

  5. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  6. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  7. {VS2010C#}{WinForm}{ActiveX}VS2010C#开发基于WinForm的ActiveX控件

    在VS2010中使用C#开发基于WinForm的ActiveX控件 常见的一些ActiveX大部分是使用VB.Delphi.C++开发,使用C#开发ActiveX要解决下面三个问题: 使.NET组件可 ...

  8. FineUI第八天----下拉列表控件

    下拉列表控件 3.模拟树的下拉列表: 其他的控件都跟Asp.net的差不多.

  9. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

随机推荐

  1. HDU 1240 Asteroids! 题解

    Asteroids! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  2. UE4 Keynote 1

    [UE4 Keynote 1] 1.U3D中的Project,在UE4中叫 ContentBrowser,中文名叫“内容浏览器” 最多可以打开4个ContentBrowser,通过 “窗口” -> ...

  3. guava布隆过滤器

    pom引入依赖 <dependency> <groupId>com.google.guava</groupId> <artifactId>guava&l ...

  4. [转]【HttpServlet】HttpServletResponse接口 案例：完成文件下载

    创建时间:6.19 & 6.24 1．案例-完成文件下载 1)  什么情况下会文件下载? 浏览器不能解析的文件就下载 *使用a标签直接指向服务器上的资源 2)什么情况下需要在服务端编写文件下载 ...

  5. VS2013 EF6连接MySQL步骤

    1.安装MySql的VS插件(版本请下载最新版)mysql-for-visualstudio-1.2.3.msihttp://cdn.mysql.com/Downloads/MySQL-for-Vis ...

  6. 关于std::bind的文章收集

    C++11 FAQ中文版:std::function 和 std::bind 2011-03-02 16:25 by 陈良乔 常规性地介绍了function和bind的使用,还不会用的同学可以看看 b ...

  7. C#中Equals 与== 的区别

    这个问题听说是大公司面试都会问的问题,以前不怎么了解,好奇心勾引我来研究一下 首先从值类型分析,先写几句简单的代码供测试用,二行语句输出的都是true, 说明＝＝与Equals功能是相同的, 判断的都 ...

  8. TensorFlow Lite for Android示例

    一.TensorFlow  Lite TensorFlow Lite 是用于移动设备和嵌入式设备的轻量级解决方案.TensorFlow Lite 支持 Android.iOS 甚至树莓派等多种平台. ...

  9. CF888G XOR-MST trie，贪心

    CF888G XOR-MST 链接 CF888G 思路 trie上贪心,先左右两边连边,再用一条边的代价连起左右两颗树.因为内部的边一定比跨两棵树的边权笑,显然是对的. 代码自己瞎yy的.启发式合并 ...

  10. 洛谷p2827蚯蚓题解

    题目 算法标签里的算法什么的都不会啊 什么二叉堆?? qbxt出去学习的时候讲的,一段时间之前做的,现在才写到博客上的 维护3个队列,队列1表示最开始的蚯蚓,队列2表示每一次被切的蚯蚓被分开的较长的那 ...