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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
js实现目录定位正文示例
Nov 14 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
es5 类与es6中class的区别小结
Nov 09 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
php中Ctype函数用法详解
2014/12/09 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
上海中网科技笔试题
2012/02/19 面试题
Ruby如何定义一个类
2012/10/08 面试题
支教自我鉴定
2014/01/18 职场文书
消防工作实施方案
2014/06/09 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
学期个人自我总结
2015/02/13 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python