类型：

总下载数:4570537 ,资源:4310

相关分类: 昭和仙君帮助文档数据库简介智能硬件分页自动化 Excel 智能版本表单终端开发算法-安全

多数据增强

多数据增强下拉列表获取

0.00

★28次@未来之窗

A:赛忞初雪

上架： 2025-09-25 02:35:22

多数据增强下拉列表获取

收藏

四方仙域传送阵

未来之窗昭和仙君 - 多数据增强下拉列表说明

多数据增强下拉列表-未来之窗昭和仙君

未来之窗昭和仙君 - cyberwin_fairyalliance_webquery

一、功能概述

多数据增强下拉列表功能专为处理带有丰富 data-* 属性的 <select> 元素设计，通过 $cq (cyberwin_query) 提供的简洁API，可轻松获取或设置下拉列表中选项的自定义数据，无需手动解析DOM元素，大幅简化开发流程。

该功能特别适用于需要在下拉列表中存储和处理额外数据的场景，如商品ID、耗时、状态等关联信息，避免了通过value属性存储复合数据的麻烦。

二、核心函数与参数

函数名	参数	返回值	功能说明
`下拉列表选中data()`	`dataKey`（字符串，必选）：数据属性键名（不含data-前缀） `value`（可选）：要设置的数据值	当仅传入dataKey时：返回选中项的对应数据值（单个元素时返回字符串，多个元素时返回数组）当传入value时：返回$cq对象，支持链式调用	获取或设置下拉列表选中项的指定数据属性
`下拉列表选中所有data()`	无	包含所有数据的对象数组	获取下拉列表选中项的所有数据属性

相关数据属性说明

data-data_line：用于存储选项的行数据信息
data-data_id：用于存储选项的唯一标识数据
cl_handle_empty_line_：用于处理空行数据的标识属性
自定义数据属性：如示例中的data-goods_id、data-expendtime等

三、英文版

函数名	参数	返回值	功能说明
`selectdata()`	`dataKey`（字符串，必选）：数据属性键名（不含data-前缀） `value`（可选）：要设置的数据值	当仅传入dataKey时：返回选中项的对应数据值（单个元素时返回字符串，多个元素时返回数组）当传入value时：返回$cq对象，支持链式调用	获取或设置下拉列表选中项的指定数据属性
`selectdatas()`	无	包含所有数据的对象数组	获取下拉列表选中项的所有数据属性

四、使用示例

示例1：获取选中项的指定数据

假设有如下下拉列表：

<select id="serviceSelectby" class="form-select">          
  <option data-goods_id="5C186935-3C90-4808-8EA9-123" value="1" data-expendtime="45">东方仙盟</option>                         
  <option data-goods_id="3C7D8BD3-3CA4-4479-8A52-456" value="2" data-expendtime="100">电脑</option>         
  <option data-goods_id="C5D958DD-C142-401E-9C66-789" value="3" data-expendtime="100">手机</option>        
  <option data-goods_id="820A236A-46D5-44F0-8CD4-111" value="4" data-expendtime="100">智能</option>           
  <option data-goods_id="22A8518D-C6D3-4F86-89AB-222" value="5" data-expendtime="100">门锁</option>                  
  <option data-goods_id="BAA1CB6A-DFB2-4813-A5E6-333" value="6" data-expendtime="100">酒店</option>  
</select>
                

交互演示：

结果将显示在这里...

获取选中项的goods_id：

// 获取选中项的data-goods_id
const selectedGoodsId = $cq('#serviceSelectby').下拉列表选中data('goods_id');
console.log(selectedGoodsId); 
// 当选中"东方仙盟"时，输出: "5C186935-3C90-4808-8EA9-123"
                

获取选中项的expendtime：

// 获取选中项的预计时间
const expendTime = $cq('#serviceSelectby').下拉列表选中data('expendtime');
console.log(`预计耗时: ${expendTime}分钟`);
                

示例2：设置下拉列表选项的数据

为所有选项设置新的data-updatetime属性：

// 为所有选项设置更新时间
$cq('#serviceSelectby').下拉列表选中data('updatetime', '2025-09-25');

// 验证设置结果（获取第一个选项的更新时间）
const firstOptionUpdateTime = $cq('#serviceSelectby option:first').下拉列表选中data('updatetime');
console.log(firstOptionUpdateTime); // 输出: "2025-09-25"
                

交互演示：

结果将显示在这里...

示例3：获取选中项的所有数据

获取当前选中项的完整数据信息：

// 获取选中项的所有数据
const selectedData = $cq('#serviceSelectby').下拉列表选中所有data();
console.log(selectedData);
/* 输出结果:
[
  {
    goods_id: "5C186935-3C90-4808-8EA9-123",
    expendtime: "45",
    updatetime: "2025-09-25",
    value: "1",
    text: "东方仙盟",
    selectId: "serviceSelectby"
  }
]
*/

// 使用获取到的数据
if (selectedData.length > 0) {
  const info = selectedData[0];
  console.log(`您选择了【${info.text}】，ID: ${info.goods_id}，预计耗时${info.expendtime}分钟`);
}
                

交互演示：

结果将显示在这里...

五、注意事项

所有方法仅对<select>元素有效，对其他元素调用会返回警告信息
当选择器匹配多个<select>元素时，下拉列表选中data()会返回数组形式的结果
设置数据时（传入第二个参数），会对匹配的所有<select>元素下的所有<option>生效
数据属性键名无需包含data-前缀，方法内部会自动处理
如果没有选中项，方法会返回null或空数组

硬件app

热门搜索:

工作台(138人)

酒店押金(90人)

押金管理(82人)

批量下载(76人)

房价牌(70人)

大屏幕(54人)

向日葵(48人)

新零售(47人)

通用押金(46人)

工作量(45人)

客户端(40人)

二维码(39人)

酒店基础(37人)

商家中心(36人)

文件夹(33人)

打字通(32人)

mastercam(32人)

连连控(31人)