Fast, simple and light jQuery plugin to customize HTML selects
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
src
README.md
package.json
源码解析.md

README.md

Selectpick下拉框插件

Fast, simple and light jQuery plugin to customize HTML selects

Selectpick是一款轻量级Jquery下拉框插件,可以绑定在任意的html标签上,并提供了自定义样式,数据源接口,样式美化以及禁用元素功能。

首先


  • 喜欢的请点心,关注,star ,fork,这些是我坚持下去的动力
  • Documentation(自己写的英文文档,后半部分是中文,待翻译中.......)
  • 图标来源ghbtn,代码高亮prism
  • 手机扫一扫,直接预览


实现的功能

  • 可以绑定到多类型的HTML元素上
  • 自定义数据源
  • 支持Ajax异步获取数据
  • 提供选项和标签禁用功能
  • 动态设置选中项
  • 用户自定义样式

正在实现的功能

  • 多样式主题切换
  • 下拉框全局钩子事件接口

API

The parameters is shown as follows:

target DomElement

the target element could be a <select> element with Zero or more elements.(For more detail, see our demo page

<select name="select" id="select">
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="10" disabled="true">人妖</option>
</select>

or even any other elements.

<input type="text" id="select3" value="0">

We encapsulate any elements into a custom select component.

The only thing you need to do is :

  1. Declare a HTML element with the attribute value or data-value, this attribute denotes the default option of the selectpick.

  2. Then you can use it like this:

$("select").Select({}); //选取 <p> 元素。
$("select.intro").Select({}); //选取所有 class="intro" 的 <select> 元素。
$("select#demo").Select({}); //选取所有 id="demo" 的 <select>

For more ways, please refer to Jquery selector

model Array

selectpick的数据源,默认格式为 [value:'1',text:'文本',disabled:false],调用示例如下:

$('#select2').Select({
    width: 200,
    model: [{
        text: "请选择",
        value: "1"
    }]
});

也可以通过HTML的option标签取值,或者通过setData()设置数据源。

disabled Boolean

是否可用,默认可用false, 如果没有这个值会去取target的disabled或target.hasClass('disabled')来判断是否可用

  1. 禁用select标签
<select id="select2" disabled="true"></select>
  1. 禁用option选项
<select name="select" id="select">
    <option value="1">男</option>
    <option value="10" disabled="true">人妖</option>
</select>

width

可以自定义下拉框的宽度

height

可以自定义下拉框的高度

$('#select').Select({
    width: 100,
    height: 30
});

Public methods

setData:function(data)

更改下拉框的数据源data,可以直接设置,也可以通过ajax方法异步获取。详见示例

addData:function (val, txt, disabled)

selectpick原型方法。

添加下拉框选项。val是选项的值,txt是选项的显示文本,disabled表示选项是否被禁用。详见示例

setValue:function (val, txt)

selectpick原型方法。

设置value属性的值为val的选项为select当前选中值。txt参数若不为空,则在选中该项的同时,改变该选中项的显示文本。详见示例

set:function(e,val)

作用同setValue,内部机制是调用setValue方法。详见示例

	$(target).trigger('set','1')//设置选中项