Combo Select 下拉框插件使用

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="dowebok">    <select>        <option value="">月份</option>        <option value="一月">一月</option>        <option value="二月">二月</option>        <option value="三月">三月</option>        ...    </select></div>

3、JavaScript

$(function() {    $('select').comboSelect();});

配置

属性/方法类型默认值说明comboClass字符串combo-select外部控制器的 classcomboArrowClass字符串combo-select-arrow箭头的 classcomboDropDownClass字符串combo-drop-down下拉展开后箭头的 classinputClass字符串combobox-input text-input输入框的 classdisabledClass字符串option-disabled禁用选项的 classhoverClass字符串option-hover鼠标经过的 classselectedClass字符串option-selected被选中项的 classmarkerClass字符串combo-marker匹配搜索的 classmaxHeight整数200最大高度themeClass字符串空使用外部主题extendStyle布尔值true 

生成后的下拉框的 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>

遇到的坑

 

option 必须是已生成的,以前使用后台数据填充的时候有数据但不能选择，原因在于没有<li></li>样式。以下样式会自动生成.
 <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">