jQuery 下拉查询筛选插件Combo Select
jQuery 下拉查询筛选插件Combo Select
卯金刀GG 发表于1年前
jQuery 下拉查询筛选插件Combo Select
  • 发表于 1年前
  • 阅读 114
  • 收藏 2
  • 点赞 0
  • 评论 1

腾讯云 技术升级10大核心产品年终让利>>>   

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

共有 人打赏支持
粉丝 3
博文 123
码字总数 20380
评论 (1)
snjbgs
在 safari 浏览器不支持中文搜索吗?求大神指点~
×
卯金刀GG
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: