Jquery.dropkick.js的使用

使用的是最新的DropKick 2.1.0

这个版本是存在一些问题的，要修改一下，修改地方如下:

 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/Index elem 要插入之前。

  将一个元素添加到选择。此选项将不仅将它添加到原来的选择，而是创造了一个反弹球来选择并将其添加到 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 select
  • disabled – 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 select
  • disabled – 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 for
  • mode – 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选项数组。*注意*：如果没有找到匹配将返回空数组。*