Select

TODO

• 键盘功能支持 Up、Down、Enter、ESC
• 多选支持

Usage

可以通过两种方式来初始化 Select 控件, 你可以根据自己的需要来进行选择.

Via data attributes

无需写 JavaScript , 即可启用下拉框.

<div class="select" data-toggle="select">
  <div class="select__picker" data-select-picker>
    <span class="select__value" data-select-value>选择品牌</span>
    <i class="select__caret"></i>
  </div>
  <div class="select__dropdown" data-select-dropdown>
    <ul>
      <li data-value="1" data-text="阿斯顿·马丁1"><b>A</b><span>阿斯顿·马丁1</span></li>
      <li data-value="2" data-text="阿斯顿·马丁2"><b>A</b><span>阿斯顿·马丁2</span></li>
      <li data-value="3" data-text="阿斯顿·马丁3"><b>A</b><span>阿斯顿·马丁3</span></li>
      <li data-value="4" data-text="阿斯顿·马丁4"><b>B</b><span>阿斯顿·马丁4</span></li>
      <li data-value="5" data-text="阿斯顿·马丁5"><b>C</b><span>阿斯顿·马丁5</span></li>
      <li data-value="6" data-text="阿斯顿·马丁6"><b>D</b><span>阿斯顿·马丁6</span></li>
    </ul>
  </div>
</div>

Via JavaScript

直接在对应的下拉框 DOM 上调用即可.

$('#select').select(options);

Options

参数可以通过 data attributes 或者 JavaScript 两种方式来配置.

Name | Type | Default | Description ---- | ---- | ------- | ----------- selectPicker | string | '[data-select-picker]' | 触发容器 selectValue | string | '[data-select-value]' | 值容器 selectDropdown | string | '[data-select-dropdown]' | 下拉容器 selectedClass | string | 'selected' | 选中选项使用的样式类. disabledClass | string | 'disabled' | 下拉框禁用状态样式类. activeClass | string | 'active' | 下拉框激活状态样式类.

Methods

.select(options)

初始化当前 DOM 内容为一个下拉框, 可以接受参数进行配置.

$('#select').select({});

.select('show')

手动打开对话框.

$('#select').select('show');

.select('hide')

手动关闭对话框.

$('#select').select('hide');

.select('toggle')

手动打开或者关闭.

$('#select').select('toggle');

.select('disable')

禁用.

$('#select').select('disable');

.select('enable')

非禁用.

$('#select').select('enable');

.data('fe.select').setValue({})

设置值

.data('fe.select').getValue()

获取值

Event

Event Type | Description ---------- | ----------- init.fe.select | 下拉框初始化时触发. show.fe.select | 当 show 方法被调用, 此事件会立即触发. shown.fe.select | 下拉框已呈现完毕时触发. hide.fe.select | 当 hide 方法被调用, 此事件会立即触发. hidden.fe.select | 下拉框已隐藏完毕时触发. change.fe.select | 当值发生变化时触发. 回调函数接受参数为 event , 当前选项值 data ({text: '', value: ''}) 和当前选项 $item 。

$('#select').on('show.fe.select', function (e) {
  // 阻止下拉框打开
  e.preventDefault();
});

End

Thanks to Bootstrap