这个版本是存在一些问题的,要修改一下,修改地方如下:
add: function( elem, before ) {
var text, option, i;
if ( typeof elem === "string" ) {
text = elem;
elem = document.createElement("option");
elem.text = text;
}
if ( elem.nodeName === "OPTION" ) {
option = _.create( "li", {
"class": "dk-option",
"data-value": elem.value,
"innerHTML": elem.text,
"role": "option",
"aria-selected": "false",
"id": "dk" + this.data.cacheID + "-" + ( elem.id || elem.value.replace( " ", "-" ) )
});
_.addClass( option, elem.className );
this.length += 1;
if ( elem.disabled ) {
_.addClass( option, "dk-option-disabled" );
option.setAttribute( "aria-disabled", "true" );
}
this.data.select.add( elem, before );
if ( typeof before === "number" ) {
before = this.item( before );
}
if ( this.options.indexOf( before ) > -1 ) {
before.parentNode.insertBefore( option, before );
} else {
this.data.elem.lastChild.appendChild( option );
}
option.addEventListener( "mouseover", this );
i = this.options.indexOf( before );
this.options.splice(this.options.length, 0, option);//修改的地方,不然会出现索引错位的问题
if ( elem.selected ) {
this.select( i );
}
}
}
reset: function( clear ) {
var i,
select = this.data.select;
this.selectedOptions.length = 0;
for ( i = 0; i < select.options.length; i++ ) {
select.options[ i ].selected = false;
_.removeClass( this.options[ i ], "dk-option-selected" );
this.options[ i ].setAttribute( "aria-selected", "false" );
if ( !clear && select.options[ i ].defaultSelected ) {
this.select( i, true );
}
}
$(this.data.elem.children[1]).find("li:gt(0)").remove();//删除,除了第一个以外的数据
this.select(this.data.elem.children[1].children[0],false);//选择第一项
if ( !this.selectedOptions.length && !this.multiple ) {
this.select( 0, true );
}
}
DropKick中文帮助文档
参数
- initialize: function 当 Dropkick 初始化。这个值是 Dropkick 对象本身。
- change: function 每当值变化的Dropkick选择(通过用户操作或通过API)。这个值是Dropkick对象本身。
- open: function 每当Dropkick选择打开。这个值是Dropkick对象本身。
- close: function 每当Dropkick选择关闭。这个值是Dropkick对象本身。
- search: string 字符串
"strict"
– 搜索字符串完全匹配的选项的文本值开始(不区分大小写)。"partial"
– 搜索字符串匹配的选项的文本价值部分(不区分大小写)。"fuzzy"
– 搜索字符串相匹配的字符在给定的顺序(不完全)。最强的对手是首选。(不区分大小写)。
默认值为
"strict"
. - mobile: boolean 加入值是
true
, 这将使移动设备的Dropkick元件。默认值为假。
属性
- dk.data – object
- elem – node Dropkick 元素
- select – node 原始的 select 元素
- settings – object 选项(缺省值和通过)
- dk.value – string 当前select选择的值
- dk.disabled – boolean 是否被禁用
- dk.form – node select 表单的形式
调用方法
- dk.add( elem, before )
elem
– Node/String HTMLOptionElement 或一个字符串插入before
– Node/Integer HTMLOptionElement/Indexelem
要插入之前。
将一个元素添加到选择。此选项将不仅将它添加到原来的选择,而是创造了一个反弹球来选择并将其添加到 Dropkick 选择。
- dk.item( index )
index
– integer
选择所需的索引列表中的一个选项(从最终选择负数)。
从列表中选择返回 Dropkick ,或NULL如果没有找到。
- dk.remove( index )
index
– integer
删除的选项(从select和Dropkick)在给定的索引。
- dk.disable( elem, disabled )
elem
– node/integer Dropkick项或选择指数disabled
– boolean 这个select不可用 (默认值true
)
禁用或启用的选项;如果只有一个布尔通过(或没有),那么整个 Dropkick 将被禁用或启用。
- dk.reset( clear )
clear
– boolean
重置Dropkick选它最初选定的选项;如果明显是真实的,它将默认选择第一个选项(或multiselects没有选项)。
- dk.refresh() 重建和reinitalizedDropkick的Dropkick对象。*只使用如果当初选择元素改变了。
高级应用
这些被归类为“高级应用”,因为我们觉得这些通常是不典型的情况下利用。
属性
- dk.length – integer The number of options in the select
- dk.options – array An array of Dropkick options
- dk.multiple – boolean If this select is a multiselect
- dk.selectedOptions – array An array of selected Dropkick options
- dk.selectedIndex – integer An index of the first selected option
调用方法
- dk.open()Opens the Dropkick. Can even open disabled dropkicks.
- dk.close()Closes the Dropkick.
- dk.select( elem, disabled )
elem
– node/integer The Dropkick option or Index of an option to selectdisabled
– boolean Allow the selecting of disabled options
Selects an option from the list.
Returns the selected Dropkick option.
- dk.selectOne( elem, disabled )
elem
– node/integer The Dropkick option or Index of an option to selectdisabled
– boolean Allow the selecting of disabled options
Selects a single option from the list and scrolls to it (if the select is open or on multiselects). Useful for selecting an option after a search by the user.
Returns the selected Dropkick option.
- dk.search( pattern, mode )
pattern
– string The string to search the options formode
– string How the search is preformed;"strict"
,"partial"
, or"fuzzy"
Finds all options whose text matches the given pattern based on the mode.
"strict"
– The search string matches exactly from the begining of the option’s text value (case insensitive)."partial"
– The search string matches part of the option’s text value (case insensitive)."fuzzy"
– The search string matches the characters in the given order (not exclusively). The strongest match is selected first. (case insensitive).
返回匹配的Dropkick选项数组。*注意*:如果没有找到匹配将返回空数组。*