jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)


Posted in Javascript onApril 08, 2016

Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器。通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。

jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载) 

效果展示       源码下载

使用方法

使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。

<link rel="stylesheet" href="fm.selectator.jquery.css"/>
<script src="jquery-1.11.0.min.js"></script>
<script src="fm.selectator.jquery.js"></script>

HTML结构

一个选项带图标级带分组选项的下拉列表的HTML结构如下:

<label for="select">
Multi select with custom content:
</label>
<select id="select" name="select" multiple>
<optgroup label="Group one" class="group_one">
<option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option>
<option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option>
</optgroup>
<optgroup label="Group two" class="group_two">
<option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option>
<option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option>
<option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option>
<option value="6" class="option_six">Six</option>
</optgroup>
<optgroup label="Group three" class="group_three">
<option value="7" class="option_seven">Seven</option>
</optgroup>
<option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
<option value="9" class="option_nine">Nine</option>
<option value="10" class="option_ten" selected>Ten</option>
<option value="11" class="option_eleven" selected>Eleven</option>
<option value="12" class="option_twelve">Twelve</option>
<option value="13" class="option_thirteen">Thirteen</option>
<option value="14" class="option_fourteen">Fourteen</option>
</select>
<input value="activate selectator" id="activate_selectator4" type="button">

初始化插件

在页面DOM元素加载完毕之后,可以通过selectator()方法来初始化该下拉列表插件。

$('#selectBox').selectator();

你也可以直接使用标签来初始化它:

<select multiple class="selectator" data-selectator-keep-open="true">

配置参数

$('#selectBox').selectator({
prefix: 'selectator_', // CSS class prefix
height: 'auto', // auto or element
useDimmer: false, // dims the screen when option list is visible
u**arch: true, // if false, the search boxes are removed and 
// `showAllOptionsOnFocus` is forced to true
keepOpen: false, // if true, then the dropdown will not close when 
// selecting options, but stay open until losing focus
showAllOptionsOnFocus: false, // shows all options if input box is empty
selectFirstOptionOnSearch: true, // selects the topmost option on every search
searchCallback: function(value){}, // Callback function when enter is pressed and 
// no option is active in multi select box
labels: {
search: 'Search...' // Placeholder text in search box in single select box
}
});

其它可用的属性标签

通过使用data-left、data-right和data-subtitle标签你可以扩展下拉列表的显示信息。它们可以通过CSS来设置样式,CSS的前缀为:prefix_title、prefix_left、prefix_right和prefix_subtitle。这些数据都是纯HTML代码,所以你也可以使用图片代码。

<select id="selectBox">
<!-- Normal option tag -->
<option value="1">This is the title</option>
<!-- Extended option tag -->
<option value="2" data-left="This is the left section"
data-right="This is the right section"
data-subtitle="This is the section under the title">This is the title</option>
</select>

上的代码会显示为类似下面的结构:

jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载) 

CSS类

class 描述
prefix_element 这是一个新的下拉列表框。它带有相同的额外class类:single 和 multiple ,它们用于设置是单选还是多选。另外 options-visible 和 options-hidden 用于设置选项是否可见
prefix_chosen_items 被选择的选项的容器
prefix_chosen_item 当前被选择的选项的容器
prefix_chosen_item_title 当前被选择的选项的标题
prefix_chosen_item_left 当前被选择的选项的左侧的内容
prefix_chosen_item_right 当前被选择的选项的右侧的内容
prefix_chosen_item_subtitle 当前被选择的选项的子标题
prefix_chosen_item_remove 当前被选择的选项的移除按钮
prefix_input This is the input box for the selectator. This is used together with options-visible or options-hidden to show and style it differently if it is a multiple selection box or a single selection box.
prefix_textlength 用于计算多项选择框中input的尺寸
prefix_options 选项列表容器
prefix_group_header 分组标题
prefix_group 分组容器
prefix_option 结果选项。它使用class active 来表明当前激活的选项
prefix_option_title 结果选项的标题
prefix_option_left 结果选项左侧的内容
prefix_option_right 结果选项右侧的内容
prefix_option_subtitle 结果选项右侧的子标题
prefix_dimmer dimmer

方法

方法 描述
refresh 该方法用于刷新插件
destroy 该方法用于销毁插件

jquery.selectator-custom下拉列表插件的github地址为:

 https://github.com/Lepshey/jquery.selectator-custom

Javascript 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 #Javascript
JS表单验证的代码(常用)
Apr 08 #Javascript
JavaScript事件代理和委托详解
Apr 08 #Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 #Javascript
关于cookie的初识和运用(js和jq)
Apr 07 #Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 #Javascript
原生JavaScript实现Ajax的方法
Apr 07 #Javascript
You might like
基于MySQL体系结构的分析
2013/05/02 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
JavaScript错误处理
2015/02/03 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
污水厂厂长岗位职责
2014/01/04 职场文书
党建工作经验交流材料
2014/05/25 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书