Skip to content

Latest commit

 

History

History
159 lines (118 loc) · 4.67 KB

README.md

File metadata and controls

159 lines (118 loc) · 4.67 KB
Raw

selectBox

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

image

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实例初始状态