基于Tether的select下拉选择框美化插件

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

在线演示 下载

安装

可以通过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