Skip to content

下拉选择器

下拉选择器控件用于从预设选项中选择单个值,支持指令加载数据和固定选项两种模式。

属性

sg-caption

  • 说明:下拉选择器的标签文字
  • 类型string

示例

json
"sg-caption":"请选择:"

sg-captionclass

  • 说明:标签文字宽度样式,w1-w7 对应 1-7 个字符宽度,more 表示超出部分省略显示(如 w5 more
  • 类型string

示例

json
"sg-captionclass":"w5"

sg-cmdcode

  • 说明:下拉选择器绑定的指令编码
  • 类型string

示例

json
"sg-cmdcode":"getuser"

sg-key

  • 说明:显示文字对应的字段名,配合 sg-cmdcode 使用
  • 类型string

示例

json
"sg-key":"NAME"

sg-list

  • 说明:下拉框的固定选项列表,包含 key(显示文字)、val(值)、selected(是否默认选中);与 sg-cmdcode 配合使用时会叠加选项
  • 类型Array

示例

json
"sg-list":[
    { "key":"选项1", "val":"值1" },
    { "key":"选项2", "val":"值2", "selected":true }
]

sg-loaddata

  • 说明:下拉控件渲染后是否自动加载数据并渲染选项;设置为 false 时需手动调用 loadSelectData 加载选项
  • 类型boolean
  • 默认值true

可选值

说明
true开启
false关闭

示例

json
"sg-loaddata":true

sg-pageid

  • 说明:指令所在的页面 ID,不填则默认为当前页面,配合 sg-cmdcode 使用
  • 类型string

示例

json
"sg-pageid":"1"

sg-require

  • 说明:是否为必填项
  • 类型boolean
  • 默认值false

可选值

说明
true
false

示例

json
"sg-require":true

sg-val

  • 说明:值对应的字段名,配合 sg-cmdcode 使用
  • 类型string

示例

json
"sg-val":"ID"

方法

loadSelectData

通过指令加载下拉框选项。

语法

js
loadSelectData(html_id, param, callback)

参数

参数名类型必填说明
html_idstring控件 ID
paramobject指令请求参数
callbackfunction回调函数,不写则为同步模式

callback 参数

参数名类型说明
successfunction成功回调
errorfunction失败回调
completefunction完成回调

示例

js
// 同步模式加载数据
loadSelectData("province", {"NAME": 1});

// 异步模式加载数据
loadSelectData("province", {"NAME": 1}, {
    success: function(data) {
        console.log("加载成功", data);
    },
    error: function(err) {
        console.log("加载失败", err);
    },
    complete: function() {
        console.log("加载完成");
    }
});

selectOptions

通过选择器,渲染下拉框选项。

语法

js
selectOptions(selector, list, value, keyParam, valueParam)

参数

参数名类型必填说明
selectorstring选择器
listArray数据列表
valueany选中值
keyParamstring键参数名
valueParamstring值参数名

示例

js
// 渲染省份下拉框
var provinces = [
    {id: "1", name: "北京市"},
    {id: "2", name: "上海市"},
    {id: "3", name: "广东省"}
];

selectOptions("#province", provinces, "2", "id", "name");

getselectItem

获取下拉框选中的整行数据。

语法

js
getselectItem(html_id)

参数

参数名类型必填说明
html_idstring控件 ID

返回值

返回下拉框控件选中选项的整行数据(通过指令获取的数据)。

示例

js
// 获取控件 ID 为 province 的下拉框选中项的整行数据
var selectedItem = getselectItem("province");
console.log(selectedItem);

getSelectData

获取下拉框数据。

语法

js
getSelectData(selector)

参数

参数名类型必填说明
selectorstring选择器

返回值

返回下拉框控件的数据。

示例

js
// 获取控件 ID 为 province 的下拉框数据
var provinceData = getSelectData("#province");
console.log(provinceData);

getSelectText

获取下拉框文字。

语法

js
getSelectText(selector)

参数

参数名类型必填说明
selectorstring选择器

返回值

返回下拉框控件的显示文字。

示例

js
// 获取控件 ID 为 province 的下拉框选中项的文本
var provinceText = getSelectText("#province");
console.log("选中的省份: " + provinceText);

基于 MIT 许可发布