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

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

效果展示源码下载

使用方法

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

链接rel='样式表href=' FM。选择者。jquery。CSS '/script src=' http : jquery-1。11 .0 .量滴js '/script script src=' http :fm。选择者。jquery。js '/脚本html结构

一个选项带图标级带分组选项的下拉列表的超文本标记语言结构如下：

标签为=' select '带有自定义内容的多选：/label sele id=' select ' name=' select '多选组标签=' Group One ' class=' Group _ One '选项值=' 1 ' class=' option _ One '数据-副标题=' Et ' data-left=' img src=' images/ingi。png ' '数据-右=' 1 ' One/option选项值=' 2 ' class=' option _ Two '数据-副标题='To '数据-左='img src='初始化插件

在页面数字正射影像图元素加载完毕之后，可以通过选择器()方法来初始化该下拉列表插件。

$('#selectBox ').选择器()；你也可以直接使用标签来初始化它：

选择多个类别="选择者"数据-选择者-保持打开="真"配置参数

$('#selectBox ').选择程序({前缀： ' selector _ '，//CSS类前缀8: ' auto '，//auto或elementuseDimmer: false，//当选项列表可见时使屏幕变暗**arch: true，//如果为假的，搜索框将被删除，//`showAllOptionsOnFocus '被强制设置为truekeepOpen: false，//如果为没错，则下拉菜单在//选择选项时不会关闭，而是保持打开状态，直到失去focusshouloptions sonfocus ://单个选择框中搜索框中的占位符文本} });其它可用的属性标签

通过使用左数据、右数据和数据字幕标签你可以扩展下拉列表的显示信息。它们可以通过半铸钢钢性铸铁(铸造半钢)来设置样式，CSS的前缀为：前缀_标题、前缀_左、前缀_右和前缀字幕。这些数据都是纯超文本标记语言代码，所以你也可以使用图片代码。

选择id='selectBox '！-普通选项标签-选项值='1 '这是标题/选项！-扩展选项标记-选项值='2 '数据-左='这是左部分'数据-右='这是右部分'数据-副标题='这是标题下部分'这是标题/选项/选择上的代码会显示为类似下面的结构：

半铸钢钢性铸铁(铸造半钢)类

班级描述前缀元素这是一个新的下拉列表框。它带有相同的额外班级类：单身和多重的，它们用于设置是单选还是多选。另外选项-可见和选项-隐藏用于设置选项是否可见前缀_选择_项目被选择的选项的容器前缀_选择_项目当前被选择的选项的容器前缀_选定_项目_标题当前被选择的选项的标题前缀_选择_项目_左侧当前被选择的选项的左侧的内容前缀_选择_项目_右当前被选择的选项的右侧的内容前缀_选择_项目_副标题当前被选择的选项的子标题前缀_选择_项目_删除当前被选择的选项的移除按钮前缀输入这是选择器的输入框。如果是多个选择框或单个选择框，它将与选项-可见或选项-隐藏一起使用，以不同的方式显示和设置样式。前缀_textlength用于计算多项选择框中投入的尺寸前缀选项选项列表容器前缀_组_标题分组标题前缀_组分组容器前缀选项结果选项。它使用classactive来表明当前激活的选项前缀_选项_标题结果选项的标题前缀_选项_左结果选项左侧的内容前缀_选项_右结果选项右侧的内容前缀_选项_副标题结果选项右侧的子标题前缀_调光器方法

方法描述恢复精神该方法用于刷新插件破坏该方法用于销毁插件jquery。选择器自定义下拉列表插件的开源代码库地址为：

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