SelectBox，jQuery写的下拉框小插件

selectBox

依赖jQuery，兼容IE8+ & 其他浏览器

Demo Link

结构

1.纯原生Select

无分组

<select id="select_id" style="display: none;"> <option value="1">测试1</option> <option value="2">测试2</option> <option value="3">测试3</option> </select>

带分组

<select id="select_id" style="display: none;"> <optgroup label="分组1"> <option value="11">测试11</option> <option value="12">测试12</option> <option value="13">测试13</option> </optgroup> <optgroup label="分组2"> <option value="21">测试21</option> <option value="22">测试22</option> <option value="23">测试23</option> </optgroup> </select>

2.div+dl>dd

无分组

<div id="div_id"> <div class="select-box-inner"> <input type="text" class="select-text"> </div> <dl> <dd data-id="1">测试1</dd> <dd data-id="2">测试2</dd> <dd data-id="3">测试3</dd> </dl> </div>

带分组

<div id="div_id"> <div class="select-box-inner"> <input type="text" class="select-text"> </div> <dl data-label="分组1"> <dd data-id="11">测试11</dd> <dd data-id="12">测试12</dd> <dd data-id="13">测试13</dd> </dl> <dl data-label="分组2"> <dd data-id="21">测试21</dd> <dd data-id="22">测试22</dd> <dd data-id="23">测试23</dd> </dl> </div>

3.纯div，jsAPI初始化数据

<div id="div_id"></div>

实例化后DOM结构如下

<div class="select-box" id="div_id"> <div class="select-box-inner"> <input type="text" class="select-text"> </div> <dl> <dd data-group-index="0" data-select-index="0" data-id="1">测试1</dd> <dd data-group-index="1" data-select-index="1" data-id="2">测试2</dd> <dd data-group-index="2" data-select-index="2" data-id="3">测试3</dd> </dl> </div> <select id="select_id" style="display: none;"> <option value="1">测试1</option> <option value="2">测试2</option> <option value="3">测试3</option> </select> 参数

dataKey: []
通过select或者dl>dd进行初始化时，可在option或者dd上增加额外属性，格式为data-[key]，如：“data-corp_id”,会把对应数据存入options对象数组内

style: {}
select生成转化后wrap包装内联样式追加

keys: { text: 'text', value: 'id' }
select text属性，可根据数据自行修改，默认通过dom创建的情况无需修改，select value属性，可根据数据自行修改，默认通过dom创建的情况无需修改

placeholder: null
选中项为空时显示文本，如："请选择"

options: null
纯数据初始化方式，传入对象数组

combo: false
默认普通下拉框，为true时为组合框

clearText: false
combo为true时点击文本是否清空当前显示文本，默认不清空

hideArrowOnDisabled: false
禁用时隐藏下拉箭头，默认不隐藏，用于特殊场景

toggleArrow: false
展开下拉列表时切换箭头，默认不切换

disabled: false
设置初始化时是否禁用

noBorder: false
是否显示显示部分边框

maxHeight: null
是否显示显示部分边框

copyStyle: true
原生select作为源的时候，自动扫描默认样式['display','border','margin','width']

input: null
fn,设置combo为true情况下输入内容时回调

filter: null
fn,初始化时过滤options数据，返回过滤后数组

filtered: null
fn,filterData调用完毕回调，返回已过滤数据

filterItem: null
fn,输出options时依次过滤每个节点数据

formatter: null
fn,输出options时格式化text内容

create: null
fn,创建完成后回调

change: null
fn,change事件，改变选中值时回调

方法 var instance = $('#select_id').selectBox()
原生select实例化 var instance = $('#div_id').selectBox()
div.select-box实例化，值初始化在dl>dd var instance = $('#div_id').selectBox({options:[{},{},{}]})
根据数组初始化，带分组初始化数据为
[{label:'分组1',options:[{},{},{}]},{label:'分组2',options:[{},{},{}]}] instance.setOptions([{},{},{}])
用于级联操作情况下重置数据 instance.val()
得到当前选中对象数据（JSON） instance.val('value')
传入value，设置为当前选中值 instance.disable()
禁用select实例 instance.enable()
启用select实例 instance.destroy()
销毁实例 instance.refresh()
恢复select实例初始状态