Select.js是一款基于Tether的select下拉选择框美化插件。 该下拉框美化插件内置3种皮肤主题。它在原生select元素的基础上通过Javascript和CSS来进行改造，并通过Tether插件来进行下拉框的定位。

是一款用于元素定位的js插件。

安装

可以通过npm和bower来安装select.js插件。

$ npm install tether-select
$ bower install tether-select

使用方法

HTML结构

可以对任何原生的select元素进行美化。

<select data-select-like-alignement="never" class="drop-select">
    <option value="potato-chips">Potato chips</option>
    <option value="chips-and-salsa">Chips and salsa</option>
    <option value="cookies">Cookies</option>
    <option value="doritos">Doritos</option>
    <option value="pringles">Pringles</option>
    <option value="hot-pockets">Hot pockets</option>
</select>
初始化插件

可以通过new Select() 方法来实例化一个下拉框对象。

new Select({
  el: selectElement
});

如果要对页面中的所有select下拉框进行美化，可以使用下面的方法。

Select.init();

也可以通过selector参数来对指定的选择器元素进行美化。

Select.init({
  selector: '.my-select'
});

还可以通过className参数来指定使用的主题。

Select.init({
  className: 'select-theme-dark'
});
Select 对象

Select构造函数会返回一个Select对象。你可以通过.selectInstance属性来获取Select示例对象。

var MySelect;

MySelect = new Select({
  el: myElement
});

new Select({
  el: myElement
});

MySelect = el.selectInstance;

Select有以下以下可用的方法：

  • .close()：如果下拉框打开则关闭它。
  • .open()：如果下拉框关闭则打开它。
  • .toggle()：切换下拉框的打开和关闭状态。
  • .isOpen()：如果下拉框处于打开状态返回true。
  • .change(val)：使下拉框选择参数指定的选项。
  • .update()：更新下拉框。
  • .value：返回当前下拉框选择的值。

你还可以为select对象绑定事件。

  • .on(event, handler, [context])：绑定一个事件。
  • .off(event, [handler])：解绑一个事件。
  • .once(event, handler, [context])：绑定一个只执行一次的事件。
  • ：
可用主题

该下拉框有三种可用的主题：通过className参数来进行设置。

  • 默认主题，不需要传入参数。
  • select-theme-dark
  • select-theme-chosen

select.js插件的github地址为：http://github.hubspot.com/select/