文档章节

jQuery 下拉查询筛选插件Combo Select

卯金刀GG
 卯金刀GG
发布于 2016/12/02 17:23
字数 328
阅读 159
收藏 2
点赞 0
评论 1

插件描述: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
粉丝 17
博文 205
码字总数 35846
作品 0
昌平
程序员
加载中

评论(1)

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

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

TerryZ
2017/05/31
0
1
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
jQuery plugin items filter

最近在Github上找到一款不错的过滤/筛选插件,类似jQuery UI的slider组件,不多说,上例子。 jQuery UI app.js index.html 效果 ![1][2] jQuery UI的官网有更多例子 -> [传送门][3] Quicksan...

Lanz
2014/10/09
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang
05/24
0
0
jQuery国际化插件 实例用法解析

理解国际化 jQuery国际化插件可以让你在JavaScript代码中轻松地处理不同文化之间的数字、货币和日期格式。例如,你可以使用这个插件正确地显示一个国家的货币符号: 你也可以用这个插件编排日...

张师傅
2013/03/11
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
自定义弹出窗口,实现可输入可过滤自动选择下拉框

/** jQuery dialog windows * author : piyg Copyright(c) : 2014-09-01 09:28 Version 1.0-pre **自定义定时定频弹出窗口; *用法: *在自身jsp页面调用 showDialog(title,fn1,fn2),showP......

osc皮皮
2014/09/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部