首页 | 5119 | 673 | 336 | 添加收藏 上一个 下一个
jQuery 下拉查询筛选插件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="zjdaima">
    <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-inputtext-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>