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 相关文章推荐
js下用eval生成JSON对象
Sep 17 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
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
PHP session有效期问题
2009/04/26 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
jquery中ajax学习笔记一
2011/10/16 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JQuery中serialize()用法实例分析
2015/02/06 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python制作websocket服务器实例分享
2016/11/20 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
美德好少年事迹材料
2014/01/19 职场文书
数学系毕业生求职信
2014/05/29 职场文书
质量安全标语
2014/06/07 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis