摘要:该功能特别适用于需要在下拉列表中存储和处理额外数据的场景,如商品ID、耗时、状态等关联信息,避免了通过value属性存储复合数据的麻烦。
该功能特别适用于需要在下拉列表中存储和处理额外数据的场景,如商品ID、耗时、状态等关联信息,避免了通过value属性存储复合数据的麻烦。
函数名参数返回值功能说明下拉列表选中data
dataKey(字符串,必选):数据属性键名(不含data-前缀)
value(可选):要设置的数据值
当仅传入dataKey时:返回选中项的对应数据值(单个元素时返回字符串,多个元素时返回数组)
当传入value时:返回$cq对象,支持链式调用
获取或设置下拉列表选中项的指定数据属性
下拉列表选中所有data无包含所有数据的对象数组获取下拉列表选中项的所有数据属性函数名参数返回值功能说明selectdata
dataKey(字符串,必选):数据属性键名(不含data-前缀)
value(可选):要设置的数据值
当仅传入dataKey时:返回选中项的对应数据值(单个元素时返回字符串,多个元素时返回数组)
当传入value时:返回$cq对象,支持链式调用
示例1:获取选中项的指定数据
假设有如下下拉列表:
东方仙盟 电脑 手机 智能 门锁 酒店
获取选中项的goods_id 获取选中项的expendtime
结果将显示在这里...
获取选中项的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}分钟`); }
让我们积极投身于技术共享的浪潮中,不仅仅是作为受益者,更要成为贡献者。无论是分享自己的代码、撰写技术博客,还是参与开源项目的维护和改进,每一个小小的举动都可能成为推动技术进步的巨大力量
Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progrss.
来源:雷霆战神王