文档章节

jQuery 下拉查询筛选插件Combo Select

卯金刀GG
 卯金刀GG
发布于 2016/12/02 17:23
字数 328
阅读 220
收藏 2

插件描述:Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式。Combo Select 能够对选项进行检索过滤,同时支持键盘控制。

使用方法

1、引入文件

<link rel="stylesheet" href="css/combo.select.css">

<script src="js/jquery.min.js"></script>

<script src="js/jquery.combo.select.js"></script>

 

2、HTML

<div class="jq22">

    <select>

        <option value="">月份</option>

        <option value="一月">一月</option>

        <option value="二月">二月</option>

        <option value="三月">三月</option>

        ...

    </select>

</div>

 

3、JavaScript

$(function() {

    $('select').comboSelect();

});

 

配置

属性/方法 类型 默认值 说明
comboClass 字符串 combo-select 外部控制器的 class
comboArrowClass 字符串 combo-select-arrow 箭头的 class
comboDropDownClass 字符串 combo-drop-down 下拉展开后箭头的 class
inputClass 字符串 combobox-input text-input 输入框的 class
disabledClass 字符串 option-disabled 禁用选项的 class
hoverClass 字符串 option-hover 鼠标经过的 class
selectedClass 字符串 option-selected 被选中项的 class
markerClass 字符串 combo-marker 匹配搜索的 class
maxHeight 整数 200 最大高度
themeClass 字符串 使用外部主题
extendStyle 布尔值 true true

生成后的下拉框的 HTML 如下:

1

2

3

4

5

6

7

8

<div class="combo-select">

    <select name="month" tabindex="-1"></select>

    <div class="combo-select-arrow"></div>

    <ul class="combo-drop-down">

        <li>....</li>

    </ul>

    <input type="text" placeholder="请选择" class="combobox-input text-input">

</div>

本文转载自:http://www.jq22.com/jquery-info8567

共有 人打赏支持
卯金刀GG
粉丝 20
博文 232
码字总数 53235
作品 0
昌平
程序员
私信 提问
加载中

评论(1)

s
snjbgs
在 safari 浏览器不支持中文搜索吗?求大神指点~
多功能下拉分页选择插件 - ComboSelect

插件已改名为 SelectPage,本项目不再维护! https://www.oschina.net/p/selectpage 多功能下拉选择插件 功能特点 基于jQuery、Bootstrap2开发 输入自动查找 列表结果分页展示 使用键盘快速操...

TerryZ
2017/05/31
0
1
Cobra WinLDTP 3.0 发布,GUI 自动化测试

Cobra WinLDTP 3.0 增加了新的 API,包括:getcellsize, getcellvalue, getaccesskey, appunderteset, and getcombovalue;同时修复了一些 bug,涉及:comboselect, verifyselect, showlist......

oschina
2013/01/15
757
0
推荐 15 个 jQuery 选择框插件

jQuery Selectbox 插件可以让你创建漂亮和吸引眼球的选择框,用于替代浏览器自带的老旧的 HTML 选择框效果。本文向你推荐 15 个 jQuery 的选择框插件,可轻松集成到你的 Web 应用中。希望你能...

oschina
2015/07/03
46.8K
13
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.7K
1
12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用...

红薯
2012/03/28
5.7K
8

没有更多内容

加载失败,请刷新页面

加载更多

外教比较

确定收费的模式 确定授课的模式 确定教学的方式-用什么样的方式能让人更快更好的学会 确定核心竞争力-比如我们的师资是牛津大学的 英语流利说 收费的模式-报特色课程,比如训练营之类的,其实...

V字仇杀
21分钟前
1
0
上下文无关文法介绍

上下文无关文法 上下文无关文法是用来描述程序语言的一种表达方式,通过简单的符号描述语言的集合。正如我们所知道,一个程序即为一个句子(字符串),语言就是所有句子的集合。上下文无关文...

陶小陶
30分钟前
3
0
eggjs与sequelize简单demo

参考 egg 官方文档 安装 // 依赖npm install --save egg-sequelize mysql2// ts 类型npm install --save @types/sequelize 插件,config/plugin.ts import { EggPlugin } from 'egg';......

Geeyu
今天
1
0
看过上百部片子的这个人教你视频标签算法解析

本文由云+社区发表 随着内容时代的来临,多媒体信息,特别是视频信息的分析和理解需求,如图像分类、图像打标签、视频处理等等,变得越发迫切。目前图像分类已经发展了多年,在一定条件下已经...

腾讯云加社区
今天
4
0
2. 红黑树

定义:红黑树(Red-Black Tree,简称R-B Tree),它一种特殊的二叉查找树(Binary Search Tree)。 要理解红黑树,先要了解什么是二叉查找树。在上一章中,我们学习了什么是二叉树,以及二叉树...

火拳-艾斯
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部