前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery 下拉查询筛选插件Combo Select

jQuery 下拉查询筛选插件Combo Select

作者头像
用户5640963
发布2019-07-26 09:58:13
6.1K0
发布2019-07-26 09:58:13
举报
文章被收录于专栏:卯金刀GG

插件描述: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>

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用方法
  • 配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档