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限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 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
网络资源
2006/10/09 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP7修改的函数
2021/03/09 PHP
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python之web模板应用
2017/12/26 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
办公室经理岗位职责
2014/01/01 职场文书
学生个人自我鉴定
2014/03/26 职场文书
意向书范文
2014/03/31 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
七年级思品教学反思
2016/02/20 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏