DOM元素

组件配置项

search检索配置

multi选择模式

item数据源

val默认值

attr自定义属性

isTree下拉树

组件应用程序接口

selectVal()取(赋)值

selectEach()数据源

selectEmpty()清空

事件

Sweet中的下拉选择项,是系统级别的底层组件。它既支持DOM元素编写,也支持组件化生成调用。在这里,我们强烈推荐组件化的调用开发模式。它自由而便捷,可以做到一次生成,随处调用。
DOM元素

● 无需绑定和渲染,Sweet这款下拉组件支持纯DOM元素编写。
● 你可以根据select的dom元素构成,对其进行取值赋值绑定事件等操作。

  • 撒非法所得发生地方111
  • 撒非法所得发生地方222
  • 撒非法所得发生地方333
  • 撒非法所得发生地方444
  • 撒非法所得发生地方555
  • 撒非法所得发生地方666
  • 撒非法所得发生地方777
  • 撒非法所得发生地方888
组件配置项
参数 类型 默认值 作用
target String类型,必须是css选择器 body 组件渲染的目标元素
search Boolean/Number/String( true/ false/ Number/ "writable") 6 是否启用检索。其值为false时,禁用检索;
其值为true时,强制启用检索;
其值为number类型时,表示根据下拉数据源的数量智能启用检索;
默认值为6,表示当下拉数据源>=6时启用检索;
其值为String类型,并等于"writable"时,组件将允许 手输,同时自动检索。
multi Boolean/String类型( true/ false/ "radio") false multi=false时,启用单选模式;multi=true时,启用多选模式;
multi="radio"时,启用必选机制,禁用清空按钮。
item Array/ Function/ String/ Object 下拉项的数据源(id和text键值对);
其值为 Array类型时,直接解析为数据源;
其值为 Function类型时,必须返回数据源数组;
其值为 String类型时,解析为url,自动请求数据源;
其值为 Object类型时,将解析为 $.ajax方法的参数,请求数据。
val String 默认选中的下拉项id
attr textAttr Object类型 显示值元素的自定义属性如name、id、class以及其它自定义属性等
idAttr 真实值元素的自定义属性如name、id、class以及其它自定义属性等
isTree Boolean类型(true/false) false 是否启用下拉树形菜单
search检索配置

search属性控制下拉组件的检索框。
● search默认值为6,即当数据源大于等于6时,启用检索。如下:

● search属性可以是一个正整数N,当数据源大于等于N时,启用检索。如下:

● search设为true时,组件将强制启用检索,不论数据源有多少项。如下:

● search设为false时,组件将强制禁用检索,不论数据源有多少项。如下:

● search设为特定字符 "writable"时,下拉组件将允许手输,此时的显示框即是检索框。
● 下拉框允许手输,实际上就变成了输入自动补全的 datalist组件。
● 此时组件将拥有记忆功能,输入的数据源中不存在的值,将会被记录在下拉项中。如下示例:

multi选择模式配置

multi属性控制下拉组件的选择模式。
● multi默认为false,即单选模式。如下示例:

● multi设置为true,即为启用多选模式。如下示例:

● multi设置为特定字符radio,即为启用必选模式,禁止清空。如下示例:

item数据源

item支持Array类型、Function类型、String类型以及Object类型四中数据源格式。
● 当item为Array类型时,将直接被解析为数据源键值对。
● 真实值的键为id,显示值的键为text。如下示例:

● 当item为Function类型时,将会被运行,必须返回Array类型的数据源。如下示例:

● 当item为String类型时,将被解析为ajax请求数据的url。如下示例:

● 当item为Object类型时,将被解析为 $.ajax请求数据的参数对象。如下示例:

val默认值

val属性用于指定下拉选择项的初始默认值,必须是数据源中存在的真实值(id)。如下示例:

attr自定义属性

attr属性用于指定下拉选择项自定义属性。
● select下拉组件初始化会渲染两个input文本框,即真实值元素class名为(wj_select_value)和显示值元素class名为(wj_select_title )。
● 通过attr或其子属性textAttr可以为显示值元素设置自定义属性,常用于定义name和 validate等。

idAttr属性用于指定真实值元素的自定义属性。

isTree下拉树

isTree属性默认为false,其值为true时,将启用下拉树模式

组件应用程序接口
方法 参数 作用 调用方法
参数名 是否必传 类型 参数含义
selectVal ele 必传 String 组件目标元素

为ele下拉项赋值val;

当val为空时返回选中的项目键值对idtext

sweet.selectVal(ele,val)
val 非必传 String/Array 为下拉项赋的值
selectEach ele 必传 String 组件目标元素 为ele下拉项重置数据源为item;
item为空则为清空数据源,可以指定val为默认值
sweet.select(ele,item,val)
item 非必传 Array/Function 下拉项的数据源
val 非必传 String 默认选中项id
selectEmpty ele 必传 String 组件目标元素 取消ele下拉项的选中项 sweet.selectEmpty(ele)
selectVal()取(赋)值

selectVal(ele,val)方法用于动态为下拉组件取(赋)值。
● 该方法接收一个选择器,返回组件选中的键值对。如下示例:

selectVal(ele,val)方法接收一个真实值val,动态为下拉组件赋选中值。如下示例:

selectEach()数据源

selectEach(ele,item,val)方法用于动态为下拉组件更新数据源。
● 该方法接收选择器ele、数据源item和默认值val。如下示例:

selectEmpty清空

selectEmpty(ele)方法方法接收一个选择器,动态清空下拉组件的选中值。如下示例:

事件

● 内置change事件,使用非常方便。

● 绑定click事件,操作dom和数据。