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

发布时间：2024-02-27

推荐整理分享jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

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

效果展示源码下载

使用方法

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

HTML结构

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

初始化插件

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

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

配置参数

其它可用的属性标签

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

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

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地址为：

jQuery实现点击水纹波动动画 jQuery点击水纹波动动画原理:1.在需要实现水波纹效果的标签中添加XXXclass="ripple-wrapper"/XXX2.代码会定位鼠标相对与标签的位置，以鼠标点为圆心画圆3.圆

JQuery导航菜单选择特效一、实现效果1.初始化效果：未添加样式和特效2、添加CSS样式3、最终效果二、JQuery代码!--编写JQuery代码--scripttype="text/javascript"$(document).ready(function(){$(".l

详解jQuery中的empty、remove和detach 通过一张对比表来解释几个方法之间的不同三者都有把元素移除的作用，但细微的差别，造就了它们的使命不同。最权威的解释当然是jQuery_API咯，下面

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

本文链接地址:https://www.jiuchutong.com/biancheng/384916.html 转载请保留说明！

上一篇：javascript里的条件判断(javascript如何)

下一篇：jQuery实现点击水纹波动动画(jquery点击事件写法)