开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在更改选项时从表中动态创建的select中获取data-*属性的值

在更改选项时从表中动态创建的select中获取data-*属性的值，可以通过以下步骤实现：

首先，确保在表中动态创建的select元素中设置了data-属性。例如，可以在每个选项中添加data-属性，如data-value="xxx"。
在更改选项时，可以使用JavaScript来获取选中选项的data-*属性值。可以通过以下步骤实现：
- 首先，获取到select元素的引用。可以使用document.getElementById()或者document.querySelector()等方法获取到select元素的引用。
- 然后，通过select元素的selectedIndex属性获取到当前选中选项的索引。
- 接下来，通过selectedIndex属性获取到选中选项的引用。
- 最后，通过选中选项的getAttribute()方法获取到data-*属性的值。例如，可以使用getAttribute("data-value")来获取到data-value属性的值。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>获取动态创建select的data-*属性值</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <select id="mySelect">
          <option data-value="value1">选项1</option>
          <option data-value="value2">选项2</option>
          <option data-value="value3">选项3</option>
        </select>
      </td>
    </tr>
  </table>

  <script>
    // 获取select元素的引用
    var selectElement = document.getElementById("mySelect");

    // 监听select元素的change事件
    selectElement.addEventListener("change", function() {
      // 获取当前选中选项的索引
      var selectedIndex = selectElement.selectedIndex;

      // 获取选中选项的引用
      var selectedOption = selectElement.options[selectedIndex];

      // 获取选中选项的data-*属性值
      var dataValue = selectedOption.getAttribute("data-value");

      // 输出data-*属性值
      console.log("选中选项的data-value属性值为：" + dataValue);
    });
  </script>
</body>
</html>

在上述示例代码中，我们首先在select元素的每个选项中添加了data-value属性，并设置了不同的值。然后，通过JavaScript代码获取到select元素的引用，并监听其change事件。在change事件的回调函数中，我们获取到当前选中选项的索引，然后通过索引获取到选中选项的引用。最后，通过选中选项的getAttribute()方法获取到data-value属性的值，并输出到控制台。

对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，无法提供相关链接。但是，腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。

相关搜索:如何从填充的选项中获取<select>的值？如何在Reactjs中获取select选项值的索引从表中动态创建的输入中获取值如何使用Svelte中动态创建的选项绑定select输入的值如何在select选项中获取v-model的值如何在React中动态更改CSS属性的值？使用动态表获取更改下拉列表中的值从jquery动态表中获取数组中的所有输入值如何在django中从普通html中的select选项值返回int 使用Oracle 11g中列值的更改从select更新/创建表(加速)在vue.js中包含动态行的表中获取select标记值如何在ion-checkbox中动态更改[checked]属性的值？如何在django中使用for循环从动态创建的表中获取javascript函数中的表行值？如何从select表单中获取选项的值并将其提交到firebase 如何在C#中获取属性名称位于变量中的动态类型的属性值如何在angularjs中从多选框中获取选中的选项值？如何在javascript中创建的表单中获取form foreach循环选项值？如何在执行select操作时省略mysql表属性中的html标记如何在更改某些属性的值或从列表中删除时通知视图？根据动态传递的属性从对象数组中获取唯一值

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter 旋转轮

在在本文中，我们将探讨 “Flutter 中的旋转轮”。我们还将在flutter应用程序中使用「flutter_spinwheel」包来实现带有自定义选项的「Spinwheel」演示程序。

02

10个好用的 HTML5 特性

在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。

01

Xcode中修改变量名、类名及字符串的替换操作

在做iOS开发代码优化的工作时，优化代码结构之前，我们应该先整理好工程的外貌，将文件和类的命名进行规范，在Xcode中为我们提供了方便而强大的名称修改功能。

02

10个好用的 HTML5 特性

在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。

02

h5新功能data-*,好好利用，还能做数据双向绑定

标题是data-,但是这里主要讲伪元素，看明白就知道了 1、jQuery Selectors 获取伪元素的属性值虽然JS里没有可以直接操作伪元素的选择符，然而获取其CSS属性的方法还是有的。 window.getComputedStyle 利用window.getComputedStyle方法选择到伪元素，然后利用getPropertyValue方法获取对应的属性的值。根据MDN的文档， window.getComputedStyle(element[, pseudoElt]); 此方法包含两个参数，一

04

php使用QueryList轻松采集js动态渲染页面方法

QueryList使用jQuery的方式来做采集，拥有丰富的插件。下面来演示QueryList使用PhantomJS插件抓取JS动态创建的页面内容。

02

CDP中的Hive3系列之分区介绍和管理

简要说明分区和性能的优势包括创建分区时必须避免的字符。创建分区和在分区中插入数据的示例介绍了基本的分区语法。也提到了分区的最佳实践。

03

Hive3创建和管理分区

您可以将Hive配置为动态创建分区，然后运行查询以在文件系统或对象存储上创建相关目录。Hive然后将数据分离到目录中。

02

两种最简单的方式教会你如何实现前端一键换肤！(￣_,￣ )

今天我就教大家用两种方式实现前端一键换肤的功能，都是给予原生 css 和 js 的方法属性，不用安装任何的第三方库

01

JavaScript——DOM基础

文档对象模型（Document Object Model），简称DOM，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准接口。

02

《PostgreSQL中的JSON处理：技巧与应用》

你好啊，技术的朋友们！猫头虎再次为大家服务啦！🐯 在数据库领域，JSON数据处理是一个热门话题，不少小伙伴在搜索“PostgreSQL JSON操作”、“PostgreSQL JSON性能优化”等关键词。在这篇文章里，我会为大家详细讲解《PostgreSQL中的JSON处理：技巧与应用》。一起来挖掘吧！🔍

01

MySQL 8.0新特性：函数索引

之前的文章中分别介绍了MySQL 8.0在索引方面的新特性--隐藏索引和降序索引，详细内容可查看之前的文章内容；

03

这五个有用的 CSS 属性完全被我忽视了

今天，我想在这里和大家分享一些我很晚时候才知道的一些CSS属性，在此之前，没有人告诉我这些属性的存在。

03

「大众点评点餐」小程序开发经验 02：视图

文 | 何延希何延希，美团点评工程师，4 年 web 开发经验，现在是美团点评点餐团队的一员。在上一期，知晓程序（微信号 zxcx0101）与大家分享了「大众点评点餐」小程序团队带来的小程序技术分析。本期，我们想要和大家分享下大众点评点餐小程序中，有关 View 视图层的一些开发经验。本文部分示例来自于「大众点评点餐」小程序的菜单页面。页面代码结构为：我们将要说的小程序的 View 视图层，是由 WXML（menu.html）与 WXSS（menu.less）两大部分组成，由组件——也就是视图

03

基于ArcGIS Pro的栅格建模器进行滑坡敏感性评估

本次实验目的是在火灾发生后，评估Thomas Fire 燃烧区域滑坡的敏感性。许多因素会导致滑坡风险增加，如土壤成分、降雨量、植被、坡度和坡向。本实验关注三个因素：植被密度、坡度和降雨量。利用栅格建模器来完成，使工作流程化，能可重复使用。

02

MySQL里面的JSON特性

在我们梳理的开发规范里面，明确规定对于lob类型的使用原则只有一个，那就是尽量不要使用。但是很明显，开发同学走到了我们前面，如果你碰到开发同学使用JSON数据类型该怎么建议呢，至少在建议前我们也得了解下JSON类型的使用要领吧。

00

「ABAP」一文带你入门OPEN SQL中的SELECT查询（附超详细案例解析）

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 ---- 💅文章概要：各位小伙伴们大家好呀！今天继续SAP ABAP系列文章的讲解，本节带来的内容是OPEN SQL中SELECT语句的介绍，希望大家喜欢！ ---- 🤟

04

「SAP ABAP」OPEN SQL（四）【FROM语句】

本文所有案例都是基于数据库表SFLIGHT，本案例中的SFLIGHT数据库表数据如下，供各位小伙伴们对照来观察代码运行结果：

02

常见 Datagrid 错误

Datagrid 控件是 Microsoft® ASP.NET 中功能最强、用途最广的 Web 控件之一，这一点已经得到了 ASP.NET 权威人士的认同。虽然 Datagrid 控件易于使用，但同样易于给使用者带来麻烦。以下是许多人所犯的一些错误，这些人包括从初学者到富有经验的 .NET 专家。您可以看到许多苦闷的使用者在 ASP.NET 新闻组和论坛就这些错误提出问题。遵循本文概述的相当简单的步骤，可以帮助您避免这些错误，并节约大量的开发时间。

02

HANA计算视图中的RANK使用方法

2、当我们必须从源集中的多个记录或前N个或后N个记录中选择最新记录时，这将非常有用。

01

【SAP HANA系列】HANA计算视图中的RANK使用方法

2、当我们必须从源集中的多个记录或前N个或后N个记录中选择最新记录时，这将非常有用。

01

【python】如何用python写一个下拉选择框和页签？

python学习之路任重而道远，要想学完说容易也容易，说难也难。很多人说python最好学了，但扪心自问，你会用python做什么了？刚开始在大学学习c语言，写一个飞行棋的小游戏，用dos界面来做，真是出力不讨好。地图要自己一点一点画出来，就像这样：

03

SqlAlchemy 2.0 中文文档（三十三）

“index”表示属性与具有预定义索引以访问它的Indexable列的元素相关联。Indexable类型包括ARRAY、JSON和HSTORE等类型。

01

掌握Flutter底部导航栏：畅游导航之旅

在移动应用开发中，底部导航栏是一种常见且非常实用的用户界面元素。它提供了快速导航至不同功能模块或页面的便捷方式，使用户可以轻松访问应用程序的各个部分。在Flutter中，底部导航栏也是一项强大的功能，开发者可以利用Flutter框架提供的丰富组件和灵活性，轻松实现各种样式和交互效果的底部导航栏。

01

Vue2笔记

在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

02

Yarn管理动态队列

这是CDP中Yarn使用系列中的一篇，之前的文章请参考<使用YARN Web UI和CLI>、<CDP 中配置Yarn的安全性>、<CDP的Yarn资源调度与管理>、<CDP中Yarn管理队列>、<Yarn在全局级别配置调度程序属性>、<Yarn配置每个队列属性>和<Yarn管理放置规则>。

01

采用HTML5之"data-"机制自由提供数据

周末总是过得很快，又到了跟代码亲密接触的日子，我在北京向各位问好，今天我分享一点关于前端的东西，HTML5之标签"data-*"自定义属性的值传递。在过去学习JavaScript时，我们可能经常会手动的完成对表单数据的校验，此功能在开发中非常常见，属于通用的功能范畴。今天我就给各位记录其中的一种，就是HTML5的"data-*"机制，它是一种标记语言标签的自定义属性，完全可以依靠这种机制自由地向后台提供各种数据，极其方便，当然，这种自定义属性的值可以通过jQuery提供的data()方法来

Yarn管理放置规则

这是CDP中Yarn使用系列中的一篇，之前的文章请参考<使用YARN Web UI和CLI>、<CDP 中配置Yarn的安全性>、<CDP的Yarn资源调度与管理>、<CDP中Yarn管理队列>、<Yarn在全局级别配置调度程序属性>和<Yarn配置每个队列属性>。

01

「硬刚Doris系列」Doris高级用法

Rollup 可以理解为 Table 的一个物化索引结构。物化是因为其数据在物理上独立存储，而索引的意思是，Rollup可以调整列顺序以增加前缀索引的命中率，也可以减少key列以增加数据的聚合度。

07

「ABAP」OPEN SQL中FROM语句超详细解析（附案例源码解读）

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 ---- 💅文章概要：各位小伙伴们大家好呀！今天继续SAP ABAP系列文章的讲解，本节带来的内容是OPEN SQL中FROM语句的介绍，希望大家喜欢！ ---- 🤟每日

02

一篇文学会商用可编辑问卷表单制作【iVX 十二】

在 iVX 快速教程中，我们使用一个公共表单项目作为 WebApp 应用的演示说明。公共表单项目可以用于企业内部或一个问卷公共平台做问卷调查，用户可以自由的设置表单元素以及样式，并且可以手动设置表单结束下载填写问卷后的调查数据。

03

ArcGIS数据生产与精细化制图之中国年降水量分布图的制作

楼主按：在今年的Esri中国用户大会上，我听了几场关于ArcGIS用于制图方面的讲座，也在体验区与Esri中国的技术老师有一些交流。一直觉得ArcGIS在空间数据管理和分析方面很强大，而在制图方面却表现得不怎么样。我看到在国内很多人制图用的是CorelDraw、AI（可能不仅仅是国内，国外的专业制图也是），诚然这些软件作为专门的图形软件，在很多方面有不可比拟的优势，但是对于地理信息制图来说，图形不能和地理信息相关联却是这些软件最大的软肋。而ArcGIS越来越注重在制图方面的发展与应用，每年举办的制图大赛就是推广之一。

02

HTML5 自定义属性 data-* 和 jQuery.data 详解

新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用，以及包括jQuery在内的四种存取方式。 HTML5 Dataset 存储的例子为一个元素分配data属性存储数据，例如这是一个span元素，它的内容是一首音乐的名称，我们为

05

「Postgresql架构」使用PostgreSQL中的JSONB数据类型加快操作

从版本9.4开始，PostgreSQL在使用JSON数据的二进制表示jsonb时提供了显着的加速，这可以为您提供增加性能所需的额外优势。

02

新手指南：DVWA-1.9全级别教程之SQL Injection

目前，最新的DVWA已经更新到1.9版本（点击原文查看链接），而网上的教程大多停留在旧版本，且没有针对DVWA high级别的教程，因此萌发了一个撰写新手教程的想法，错误的地方还请大家指正。 DVWA简介 DVWA（Damn Vulnerable Web Application）是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用，旨在为安全专业人员测试自己的专业技能和工具提供合法的环境，帮助web开发者更好的理解web应用安全防范的过程。 DVWA共有十个模块，分别是 Brute Force（暴力

08

使用VUE组件创建SpreadJS自定义单元格(一)

作为近五年都冲在热门框架排行榜首的Vue，大家一定会学到的一部分就是组件的使用。前端开发的模块化，可以让代码逻辑更加简单清晰，项目的扩展性大大加强。对于Vue而言，模块化的体现集中在组件之上，以组件为单位实现模块化。

02

matinal：SAP ABAP 从创建类开始学习面向对象编程

对于ABAP OO开发新手而言, 要创建一个ABAP类，请转到ABAP工作台SE80，选择“类”，点击鼠标右键后点击“创建”，在输入字段中输入名称YCL_CUSTOMER并按回车。确认弹出窗口，并在下一个窗口中输入描述，同时保持其他设置不变。

01

Javascript DOM(一)

预解析：js 引擎会把 js 里面所有的 var 和 function 提升到当前作用域的最前面

03

64位内核开发第十四讲,MiniFilter文件过滤框架以及安装方式

MiniFilter是微软为我们开发的一个新的驱动,称为过滤管理器.(Filter Manager或者 fltmgr).这个驱动主要作用就是如果有文件操作可以通知我们.

04

Power Query 真经 - 第 2 章 - 查询管理

在深入到 Power Query 数据转换的广阔世界之前，最好先确保为将来的成功做好准备。从实际来说，往往一开始的项目或案例都很小，但随着时间的推移，最终会变得越来越复杂。本章描述的方法将有助于确保随着问题的规模变大和复杂性增加，也可以应对。

04

Ask Apple 2022 中与 Core Data 有关的问答

Ask Apple 为开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动中与 Core Data 有关的一些问答进行了整理，并添加了一点个人见解。本文为上篇。

02

JQuery 学了不亏

jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。

03

开发 | 小程序开发有哪些坑？这份笔记都整理出来了

知晓程序注：即使你认为小程序开发很简单，也无法否认小程序开发中，仍然有许多需要注意的地方。稍不注意，就会产生意料之外的问题。知晓程序（微信号 zxcx0101）今天推荐的这篇文章，是作者通过亲身开发，找到了微信小程序开发中的坑，并在文章给出了解决方案。希望能够帮助开发小程序的你，避开这些坑。文 | 泡芙小姐 110 1. JSON 配置文件小程序中，包含唯一的全局配置文件 app.json，以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json 相同

03

CDP中的Hive3系列之管理Hive

Apache Hive 在行级别支持 ACID（原子性、一致性、隔离性和持久性）v2 事务，无需任何配置。了解此支持需要什么可帮助您确定您创建的表类型。

03

Edge2AI之使用 Flink/SSB 进行CDC捕获

在本次实验中，您将使用 Cloudera SQL Stream Builder来捕获和处理来自外部数据库中活动的更改。

02

Flink Table&SQL必知必会（干货建议收藏）

Flink本身是批流统一的处理框架，所以Table API和SQL，就是批流统一的上层处理API。目前功能尚未完善，处于活跃的开发阶段。

02

django 组装表名查询数据（动态表名、组合表名）

教程：https://www.runoob.com/python/python-func-getattr.html

01

学习zepto.js(对象方法)[3]

学习zepto.js(对象方法)[3] 继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("").attr("id"); //--> "special" 注意:只能返回对象中第一个节点的属性值 set: 返回值为一个zepto对象 $("").attr("id","special"); //

09

SQL命令 UPDATE（四）

本节中的示例更新SQLUser.MyStudents表。下面的示例创建SQLUser.MyStudents表，并用数据填充它。因为这个示例的重复执行会积累具有重复数据的记录，所以它使用TRUNCATE TABLE在调用INSERT之前删除旧数据。在调用UPDATE示例之前执行这个示例:

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭