jQuery 下拉查询筛选插件Combo Select

所属分类:输入-选择框

 112940  412  查看评论 (41)
分享到微信朋友圈
X
jQuery 下拉查询筛选插件Combo Select ie兼容9

使用方法

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布尔值truetrue

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

<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>


相关插件-选择框

9款表单复选框(Checkbox)与单选按钮美化

9款表单复选框(Checkbox)与单选按钮美化
  选择框
 35668  361

原生js写的三级联动

非常简单的js三级联动很简单扩展性好
  选择框
 32923  328

基于citypicker做四级联动,数据异步获取,动态赋值

参照、修改citypicker做四级联动,数据异步获取,动态赋值
  选择框
 23701  291

移动端城市选择

手机移动端城市选择
  选择框
 57750  495

讨论这个项目(41)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    kkk 0
    2021/10/15 18:35:35
    动态新增的select不能被选中
        kkk0
        2021/10/16 9:18:50
        解决了,在动态新增的时候再调用一次$('select').comboSelect(); 就好了😀
    回复
    再也回不去、 0
    2021/9/17 14:23:26
    输入内容后不按空格键确认输入内容,按数字确认内容后,无法展开下拉列表,为啥不触发Input的 change事件啊,怎么修改呀😥 回复
    仰望星空 0
    2021/9/10 10:56:26
    感谢分享,很不错的东西 回复
    LX. 0
    2020/7/1 18:35:55
    这个怎么赋值,怎么清除之前选过的记录啊,找了好久都没有答案 回复
    子鱼小窝 0
    2020/4/30 11:06:35
    怎么禁用下拉框? 回复
    BoleSea 0
    2018/12/4 23:20:16
    有什么办法可以在一个页面中使用两次$('select').comboSelect(); 吗?我在两个id上使用了这个,最终只能显示一个,而且还有冲突,求大神指教!
        sweetmicky0
        2019/10/9 10:01:07
        分别给两个select两个class,$('.填写class').comboSelect();
    回复
    王家佳 0
    2018/10/11 16:11:36
    这个插件在页面不是全屏情况下,点击右边会同时出现原来的select option选项和封装后的option选项
        很沉的风0
        2018/10/23 10:36:15
        解决了吗
        ritchey1
        2018/11/1 15:24:37
        可以在这个 @media only screen and (min-width: 960px) css属性上添加一条: display:none; 就解决这个问题了.
        ritchey0
        2018/11/1 15:40:18
        如果还有 那就 .combo-select select 直接在这个 样式上加上display:none
    回复
    ????????????? 0
    2018/6/27 16:37:27
    有bug啊,点击为啥事双层的,能搜索和不能搜索叠加到一块了 回复
    Dream 0
    2018/6/19 20:51:01
    如何通过js设置Select的值? 回复
    Dream 0
    2018/5/25 19:05:25
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复