API Docs for: 0.2
Show:

JC.AutoSelect Class

select 级联下拉框无限联动


只要引用本脚本, 页面加载完毕时就会自动初始化级联下拉框功能

动态添加的 DOM 需要显式调用 JC.AutoSelect( domSelector ) 进行初始化

要使页面上的级联下拉框功能能够自动初始化, 需要在select标签上加入一些HTML 属性

require: JC.common

JC Project Site | API docs | demo link

select 标签可用的 HTML 属性

defaultselect, 这个属性不需要赋值
该属性声明这是级联下拉框的第一个下拉框, 这是必填项,初始化时以这个为入口
selectvalue = string
下拉框的默认选中值
selecturl = AJAX 数据请求的URL
下拉框的数据请求接口, 符号 {0} 代表下拉框值的占位符
selectignoreinitrequest = bool, default = false
首次初始化时, 是否需要请求新数据
有时 联动框太多, 载入页面时, 后端直接把初始数据输出, 避免请求过多
selecttarget = selector
下一级下拉框的选择器语法
selectdatacb = 静态数据请求回调
如果数据不需要 AJAX 请求, 可使用这个属性, 自行定义数据处理方式
selectrandomurl = bool, default = false
AJAX 请求时, 添加随机参数, 防止数据缓存
selecttriggerinitchange = bool, default = true
首次初始化时, 是否触发 change 事件
selecthideempty = bool, default = false
是否隐藏没有数据的 selecct
selectdatafilter = 请求数据后的处理回调
如果接口的数据不符合 select 的要求, 可通过这个属性定义数据过滤函数
selectbeforeinited = 初始化之前的回调
selectinited = 初始化后的回调
function selectinited( _items ){
   var _ins = this;
}
selectallchanged = 所有select请求完数据之后的回调, window 变量域
function selectallchanged( _items ){
   var _ins = this;
}
selectCacheData = bool, default = true
是否缓存ajax数据
selectItemDataFilter = function
每个select 显示option前,可自定义数据过滤函数
function selectItemDataFilter2( _selector, _data, _pid){
   //alert( '_pid:' + _pid + '\n' + JSON.stringify( _data ) );
   var _r, i, j;
   if( _pid === '' ){//过滤北京id = 28
       _r = [];
       for( i = 0, j = _data.length; i < j; i++ ){
           if( _data[i][0] == 28 ) continue;
           _r.push( _data[i] );
       }
       _data = _r;
   }
   else if( _pid == 14 ){//过滤江门id=2254
       _r = [];
       for( i = 0, j = _data.length; i < j; i++ ){
           if( _data[i][0] == 2254 ) continue;
           _r.push( _data[i] );
       }
       _data = _r;
   }
   return _data;
}

option 标签可用的 HTML 属性

defaultoption, 这个属性不需要赋值
声明默认 option 选项, 更新option时, 有该属性的项不会被清除

数据格式

[ [id, name], [id, name] ... ]
如果获取到的数据格式不是默认格式, 可以通过 AutoSelect.dataFilter 属性自定义函数, 进行数据过滤

Methods

data

(
  • _selector
)

获取 select 的数据

Parameters:

  • _selector Selector

Returns:

JSON

first

()

获取第一个 select

Returns:

selector

getInstance

(
  • _selector
  • _ins
)
static

获取或设置 selector 的实例引用

Parameters:

  • _selector Selector
  • _ins AutoSelectControlerInstance

Returns:

AutoSelectControlerInstance

isFirst

(
  • _selector
)

是否为第一个 select

Parameters:

  • _selector Selector

Returns:

selector

isInited

(
  • _selector
)

是否已经初始化过

Parameters:

  • _selector Selector

Returns:

selector

isLast

(
  • _selector
)

是否为最后一个 select

Parameters:

  • _selector Selector

Returns:

selector

isSelect

(
  • _selector
)
static

判断 selector 是否为符合自动初始化联动框的要求

Parameters:

  • _selector Selector

Returns:

bool

items

()

获取所有 select

Returns:

selector

last

()

获取最后一个 select

Returns:

selector

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

AutoSelectInstance

removeItems

(
  • _selector
)
Int static

清除 select 的 所有 option, 带有属性 defaultoption 例外

Parameters:

  • _selector Selector

Returns:

Int:

deleted items number

trigger

(
  • _evtName
)

使用 jquery trigger 绑定事件

Parameters:

Returns:

AutoSelectInstance

update

(
  • _ls
)

更新默认选中列表

Parameters:

  • _ls Array | String

    ids for selected, (string with "," or array of ids );

Returns:

AutoSelectInstance

Properties

allChanged

Function static

下拉框所有项数据变更后的回调
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectallchanged

Default: null

beforeInited

Function static

下拉框初始化功能都是未初始化 数据之前的回调
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectbeforeInited

Default: null

change

Function static

下拉框每个项数据变更后的回调
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectchange

Default: null

dataFilter

Function static

级联下拉框的数据过滤函数
默认数据格式: [ [id, name], [id, name] ... ]
如果获取到的数据格式非默认格式, 可通过本函数进行数据过滤

注意, 这个是全局过滤, 如果要使用该函数进行数据过滤, 判断逻辑需要比较具体
如果要对具体 select 进行数据过滤, 可以使用HTML属性 selectdatafilter 指定过滤函数

Default: null

Example:

            AutoSelect.dataFilter = 
               function( _data, _select ){
                   var _r = _data;
                   if( _data && !_data.length && _data.data ){
                       _r = _data.data;
                   }
                   return _r;
               };

hideEmpty

Bool static

是否自动隐藏空值的级联下拉框, 起始下拉框不会被隐藏
这个是全局设置, 如果需要对具体某个select进行处理, 对应的 HTML 属性 selecthideempty

Default: false

Example:

           AutoSelect.hideEmpty = true;

ignoreInitRequest

Bool static

首次初始化时, 是否需要请求新数据
有时 联动框太多, 载入页面时, 后端直接把初始数据输出, 避免请求过多

Default: false

inited

Function static

下拉框第一次初始完所有数据的回调
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectinited

Default: null

processUrl

Function static

处理 ajax url 的回调处理函数
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectprocessurl

Default: null

randomurl

Bool static

ajax 请求数据时, 是否添加随机参数防止缓存
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selectrandomurl

Default: false

triggerInitChange

Bool static

第一次初始化所有联动框时, 是否触发 change 事件
这个是全局回调, 如果需要对具体某一组进行处理, 对应的 HTML 属性 selecttriggerinitchange

Default: false

Events

SelectAllChanged

最后一个 select change 后的事件

SelectBeforeInited

初始化之事的事件

SelectChange

响应每个 select 的 change 事件

SelectInited

初始化后的事件

SelectItemBeforeUpdate

select 更新数据之前触发的事件

SelectItemUpdated

select 更新数据之后触发的事件