文档章节

jQuery 下拉查询筛选插件Combo Select

卯金刀GG
 卯金刀GG
发布于 2016/12/02 17:23
字数 328
阅读 177
收藏 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
粉丝 19
博文 214
码字总数 47581
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
3
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
3
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
2
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
3
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部