使javascript通过data-id引用更改选择选项
基础概念
在JavaScript中，data-id是一种自定义的HTML属性，用于存储页面或应用程序的特定数据。它不是HTML标准的一部分，但被广泛用于添加额外的信息到DOM元素中，而不干扰页面的表现或行为。
相关优势
- 扩展性：通过
data-*属性，可以添加任意数量的自定义数据到HTML元素。 - 可访问性：这些数据对JavaScript来说是可访问的，但对用户是不可见的。
- 组织性：有助于组织和管理与特定元素相关的数据。
类型
data-*属性可以存储任何类型的数据，包括字符串、数字、布尔值等。但是，它们通常以字符串形式存储。
应用场景
- 状态管理：用于跟踪元素的状态，如是否被选中。
- 配置信息：存储元素的特定配置或设置。
- 数据传递：在不同的JavaScript组件或模块之间传递数据。
示例代码
假设我们有一个下拉选择菜单，我们想要通过点击按钮来更改选中的选项，并且使用data-id来标识每个选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Select Option with data-id</title>
</head>
<body>
<select id="mySelect">
<option value="1" data-id="option1">Option 1</option>
<option value="2" data-id="option2">Option 2</option>
<option value="3" data-id="option3">Option 3</option>
</select>
<button onclick="changeSelectedOption('option2')">Select Option 2</button>
<script>
function changeSelectedOption(dataId) {
// 获取所有的选项
var options = document.querySelectorAll('#mySelect option');
// 遍历选项，找到匹配data-id的选项并设置为选中状态
options.forEach(function(option) {
if (option.getAttribute('data-id') === dataId) {
option.selected = true;
}
});
}
</script>
</body>
</html>遇到的问题及解决方法
如果在尝试更改选项时遇到问题，可能的原因包括：
- 选择器错误：确保使用正确的选择器来获取元素。
- 属性值不匹配：确保
data-id的值与传递给函数的值匹配。 - 脚本加载顺序：确保JavaScript代码在DOM元素加载之后执行。
示例问题及解决
问题：点击按钮后，选项没有被更改。
原因：可能是由于脚本在DOM元素加载之前执行。
解决方法：将JavaScript代码放在<body>标签的底部，或者使用DOMContentLoaded事件来确保DOM完全加载后再执行脚本。
document.addEventListener('DOMContentLoaded', function() {
// 你的JavaScript代码
});通过这种方式，可以确保在尝试访问或修改DOM元素之前，所有的HTML元素都已经加载完毕。
相关·内容
3回答
我有这个投票片段，我想在另一个按钮中添加一个禁用的类，而不是用户按的按钮。例如，如果用户在id 1 post上投票+，那么-按钮将得到一个禁用的类，而不是id 2类。
<span class="pull-right">
<a href="javascript:void(0)" class="vote" data-id="1" data-type="up">+</a>
<span id="votes-1"
浏览 6提问于2015-07-02得票数 1
回答已采纳
3回答
使用jquery的数据id属性？
、、、、
我在用jQuery。我需要获取单击项的data-id并将其传递给一个webservice。如何获得data-id属性？
我的HTML看起来如下：
<ul class="nav nav-pills">
<li class="onselectedCategory" data-id="12"><a href="javascript:;;">12</a></li>
<li class="onselectedCategory" data-id=
浏览 0提问于2014-07-15得票数 0
回答已采纳
1回答
我在下面列出了行动守则。你们能帮我一把吗？
<form action="" method="post">
<input type="text" class="form-control" list="colours" name="colours">
<datalist id="colours">
<option value="Red" data-id="1">
<o
浏览 1提问于2018-07-02得票数 0
回答已采纳
我在网页上有一个带有数据id和值的选择器。
<select id="s1">
<option data-id="01">aaaa1</option>
<option data-id="23">bbb1</option>
<option data-id="451">ccc1</option>
<option data-id="56">ddd1<
浏览 3提问于2013-10-25得票数 0
回答已采纳
我试图列出几个元素，并可以通过一个模式编辑它们，我试图使用data-id属性，但这样它只适用于列表的第一个元素。
这是我的Html：
{% for job_title in job_title_list %}
<tr>
<td align="center"><div style="width:200px">{{job_title.title}}
<a class="col-xs-1 text-info" data-id="{{job_title.id}}
浏览 24提问于2020-02-05得票数 0
回答已采纳
在下面的示例中，如何更改特定h2 <div>中所有h2的类，同时保持单击的类不变？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar voting thingy</title>
<style type="text/css">
.hide {
display: none;
浏览 1提问于2013-08-26得票数 0
<input type="text" value="" list="department" />
<datalist id="department">
<option data-id="1" value="arthur"></option>
<option data-id="2" value="arthur"></option>
<option data-id=
浏览 1提问于2016-01-16得票数 1
2回答
javascript / jQuery的新特性。我将一些数据显示在一个有序列表中，如下所示
<ul>
<li data-id="">
<a data-link="0" data-actiontype="article" href="#">Data 0</a>
</li>
<li data-id="">
<a data-link="1" data-actiontype=
浏览 0提问于2012-10-31得票数 0
2回答
我想确定从哪个网站的用户已经提交了一份联系表格。
联系人表单是一个包含文件(.shtml)，该文件正在两个不同的网站上使用。因为它只是一个文件(包括)，那么javascript if...else语句或switch语句会这样做吗？如果是的话，怎么写呢？
我对JavaScript还不熟悉，也不需要写很多东西，所以我很感激对语法的帮助。
我考虑在其中一个包含联系人表单上添加两个隐藏字段，其中包含两个不同站点的ID：
html
<input type="hidden" data-id="new_student_signup" name="student_
浏览 3提问于2012-02-01得票数 1
我在ID列的html表达式中设置了data-id，例如: data-id=&ID. -并且它起作用了。但是，我如何设置data-id=&LAST_NAME。并在JavaScript中使用数据id？
浏览 30提问于2021-09-27得票数 2
回答已采纳
1回答
我想从插件中调用一个外部函数，我希望外部函数能够读取被调用的按钮的值日期id。
plugin.js
;(function ($, window, document, undefined) {
// Function-level strict mode syntax
'use strict';
$.fn.Plugin = function(options) {
var options = $.extend({}, $.fn.Plugin.defaults, options);
return this.each(function() {
var
浏览 2提问于2015-07-10得票数 2
回答已采纳
我尝试过多种方法来获取所选项的数据属性(data-id、data-key)，但似乎没有什么可行的方法。
有几个资源提到这对于datalist来说是不可能的.
现在有办法做到这一点吗，还是仍然不可能？
我真的很想要一种香草的Javascript方式。
document
.getElementById('input-journal-item-company')
.addEventListener("change", (e) => {
console.log(e.target.dataset) // Empty object DOMStrin
浏览 0提问于2018-12-02得票数 0
回答已采纳
4回答
我正在使用jQuery插件。如何使用jQuery选择所选选项的数据属性。
这是代码
<select class="select2">
<option data-id="1" value="2"> CASE 1 </option>
<option data-id="2" value="2"> CASE 1 </option>
<option data-id="3" value="2"> CASE 1 &
浏览 5提问于2014-12-04得票数 0
回答已采纳
我使用Vanilla JavaScript创建了选项卡，但我有点难以理解为什么不能将for循环替换为onTabSelectorClick函数中的forEach循环。
我试图替换下面的for循环：
for(i; i < tabSelector.length; i++) {
if(tabSelectorSelected.getAttribute('data-id') === tabContent[i].getAttribute('data-id')) {
tabContent[i].classList.add('ta
浏览 0提问于2020-04-30得票数 1
回答已采纳
1回答
选定时表单中的重复字段
、、、、
我做了一张表格来选择技能。在作出第一选择后，第二列表显示的选项取决于第一选择。然后，一个"+“按钮允许复制字段，并添加另一个技能。
我的问题:
inital表单是可以的，但是当我按下"+“时，创建的第二个表单不起作用(第二个"select字段”不会根据第一个select进行筛选。
你能帮忙吗？
非常感谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="vi
浏览 0提问于2020-10-28得票数 3
回答已采纳
3回答
我是JavaScript和jQuery的新手。我正试图为我正在做的网站创建一些东西，但我想不出这一点。
如何使jquery基于另一个下拉列表的选定数据属性显示或隐藏下拉列表的select选项？
IE，在第一个下拉菜单中选择选项2将只显示第二个菜单中的选项1和选项3，反之亦然？
$(document).ready(function() {
$("#make_id").change(function() {
/* basically if data-make is = to selected data-id option, show option,
浏览 7提问于2015-12-29得票数 1
回答已采纳
2回答
我有两个下拉列表，当两个更改之一发生时，我需要将它们的两个值传递给组件中的updateGraph函数。
<div class="card-body" (change)="updateGraph($event)">
<div class="row">
<label>City</label>
<select data-id="
浏览 1提问于2018-11-13得票数 2
回答已采纳
3回答
我有一个Ajax请求，它在单击一个href时触发，该href是具有相同类.button的一组href的一部分。HTML如下所示：
<div id="button-container">
<a href="#" class="button red" data-id="1"></a>
<a href="#" class="button red" data-id="2"></a>
<a href=&#
浏览 0提问于2012-03-29得票数 0
回答已采纳
在Chrome DevTools中，在源标签中调试调试器时(在JS代码中添加“JavaScript；”行，然后使用F10/F11单步执行代码)，如何在单步执行代码的同时查看DOM？
如果我的JS正在操作DOM，我通常需要逐步执行JS调试器并观察JS是如何修改DOM元素的。例如，我可能必须查看元素是如何移动的，它们是否在应该被移除的时候被移除，它们是否在正确的时间获得了正确的类，等等。
必须在Sources选项卡和Elements选项卡之间来回切换才能查看我执行的每一行的DOM是如何修改的，这阻碍了我的调试，使我无法判断每一行是如何影响DOM的。
如何在单步执行代码的同时查看元素？
浏览 4提问于2017-03-21得票数 9
这是我在javascript中的情况：
EA = {
DOMElement: $('#example img'),
photos: '',
...
countSelected: function(){
var len = 0;
var id = '';
EA.DOMElement.each(function(index){
id = $(this).attr('data-id');
EA.photos
浏览 0提问于2012-08-31得票数 1
2回答
我有这样的代码：
function changeEventStatusClass(object){
if ($(object).hasClass("fa-circle")) {
$(object).removeClass("fa-circle").addClass("fa-circle-o");
//alert("adevarat");
} else {
$(object).removeClass("fa-circle-o").addClass(
浏览 1提问于2016-01-28得票数 0
回答已采纳
我有下面的html代码。
$(".category-tab").on('click', function() {
var category_id = $(this).data("id");
$("#search-form").removeAttr("data-categoryid");
$("#search-form").attr("data-categoryid", category_id);
});
$("#search-form").submi
浏览 1提问于2017-12-17得票数 1
回答已采纳
我有一些代码，允许用户将数据输入到引导程序中，然后单击submit按钮，日期显示在导航面板中。在单击按钮时，我有一个javascript函数，它将确定用户在哪个选项卡上，并在MVC控制器中运行C#函数。我现在有两个函数DelayedSpiffDate，InstantSpiffDate。由于某些原因，它只会加载DelayedSpiffDate函数，即使选择了instantspiff选项卡。我不知道我做错了什么？这是我的html：
<div class="row-fluid 1">
<div class="col-lg-12 delayed_spi
浏览 3提问于2015-11-17得票数 1
回答已采纳
想要切换开关来控制表单字段时检查，以下是示例代码，请建议
<div class="form-group row">
<label for="lot-1" class="col-sm-2 col-form-label">x</label>
<div class="col-md-4">
<input type="text" class="form-control numbersOnly" name="lot-1
浏览 2提问于2018-09-16得票数 0
2回答
我将如何编译
export default User
import socket from "./socket"
这个带有ES6 javascript函数的haxe？
import socket from "./socket"
let User = {
init(socket, element) {
if (!element) {
return
}
let userId = element.getAttribute("data-id")
userId=
浏览 5提问于2016-05-15得票数 3
回答已采纳
4回答
最初，我有一个“喜欢的按钮”，运行非常顺利，它看起来如下：
<a href="javascript:void();" class="like" id="<?php echo $row['id']; ?>">Like <span><?php echo likes($row['id']); ?></span></a>
以下是Ajax代码：
<script>
$(function(){
$(".like&#
浏览 1提问于2017-07-04得票数 0
回答已采纳
2回答
我试图在django中删除选定的对象，但当我选择一个项目时，单击delete按钮，它不会删除，但在刷新页面之后，选择的对象就会被删除。这是
views.py
@login_required
def delete_contact(request):
if request.is_ajax():
selected_contacts = request.POST['contact_id']
selected_contacts = json.loads(selected_contacts)
for i, contact in en
浏览 1提问于2019-04-16得票数 0
2回答
jquery代码
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$(".shoppingCart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
浏览 3提问于2013-09-14得票数 4
回答已采纳
1回答
我是网络新手。我编写了这个jQuery模式窗口：
<div id="dialog" title="Basic dialog" class="modal-body" style="display:none;">
<p>@Html.TextArea("commentForDecline")</p>
<button title="Ok" class="btn btn-primary ok-request">Ok</button&
浏览 0提问于2015-05-04得票数 0
回答已采纳
1回答
在网站上，我需要单击弹出的模式窗口中的复选框。 我似乎无法为它获取适当的xpath。我试过了： req_checkbox = driver.find_element_by_xpath("//td/div/input[@data-id='34970']")
driver.execute_script("arguments[0].click();", req_checkbox) 还尝试了： req_checkbox = WebDriverWait(usedriver, 15).until(EC.presence_of_element_located
浏览 12提问于2019-05-15得票数 1
回答已采纳
1回答
所以我有select标签和嵌入式选项标签。我在这里得到了帮助，，关于如何根据上一个select组的选择筛选下一个select组。
在更深的层中有很多选项，所以我想知道如何使用ajax请求来实现这一点。我希望通过ajax填充layer2 (和更深层的层)。
下面是一些玩具html，也是从这里开始的，，演示如何使用jquery影响更深层次的多选择框，我从jquery获得了帮助。
<select id="layer1" multiple="multiple">
<option data-id="3">Chocolate<
浏览 1提问于2015-07-10得票数 0
回答已采纳
在我的insert.php文件中，我有以下内容
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<script type="text/javascript" src="includes/js/jquery.form.js"></script>
<script type="text/javascript">
浏览 1提问于2013-04-25得票数 0
我只使用CSS3 :target制作了这个很酷的“模式”，但是当我选择一个选项时，这个模式就会消失，'Criar‘按钮将不再工作，我想修复它，但我很难，我已经尝试了改变显示元素，使用hide()和show()，没有什么工作！
我想要能够选择一个事件，使‘模式’消失，但不改变按钮的功能。
HTML：
<a href="#new__event" class="create__event">Criar evento</a>
<div id="new__event">
<a href=
浏览 2提问于2015-02-28得票数 1
回答已采纳
2回答
我试图从所有的data-id中获得td值。但是我只从第一个data-id中得到了td值。为什么我没有从第二个td获得td值到最后一个td？
这是我的刀片模板代码：
@foreach ($types as $type)
<tr>
<td>{{$type->name}}</td>
<td><a href="javascript:void(0)"
浏览 10提问于2022-08-01得票数 0
我试图添加一个弹出到一个引导选择选择器，但结果是挑剔的。我怎样才能可靠地做到这一点？
谢谢。
代码
我有一个代码的。以下是有关节选：
Html
<body>
<input class="" type="text" id="text" />
<select id="select">
<option>option1</option>
<option>option1</option>
</select>
<
浏览 4提问于2016-02-02得票数 0
回答已采纳
我知道在jQuery中你可以使用$(".cssClass")来获取这个类的所有元素。然而，在普通的html和javascript中，如何对元素进行逻辑分组呢？例如：
<input id="fee1" data-id="1" data-group="Fees" type="text" value="$15.00"/>
<input id="fee2" data-id="2" data-group="Fees" type="tex
浏览 0提问于2010-12-25得票数 2
回答已采纳
<select name="product">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<table id="ListProduct">
<tr data-id="1"><td>A</td></tr
浏览 0提问于2015-08-28得票数 1
3回答
我有一个项目列表，每个项目都是一个按钮，有一个唯一的data-id，如下所示 <button type="button" class="stuff" data-id="123"> 我需要使用控制台点击按钮 如何在控制台中仅使用javascript或jQuery使用特定的data-id (并单击按钮)来选择按钮？ 下面的答案不是一个解决方案，因为我不能使用CSS查询选择器jQuery get an element by its data-id
浏览 27提问于2020-12-23得票数 0
回答已采纳
1回答
jQuery单击函数不能正常工作。实际上它可以工作，但我在页面之后通过JavaScript调用加载jQuery，在这种情况下，jQuery单击函数不起作用。
HTML部件：
<table class="table table-lg">
<thead>
<tr>
<th width="5%" class="text-center">#</th>
<th width="30%" class="text-cen
浏览 4提问于2016-05-20得票数 0
回答已采纳
在页面加载时运行我的JavaScript代码有困难。我对JavaScript还不太了解，无法找到正确的选择。
下面的代码对于“更改”事件很好，但是我希望代码在加载时运行，并使用输入字段的默认值来显示相关的div。
我尝试将JavaScript的第一行更改为以下选项，但没有成功：
jQuery(document).ready('onload', e => {
window.addEventListener('load', e => {
document.addEventListener('DOMContentLoaded', e =&g
浏览 5提问于2022-09-30得票数 -4
回答已采纳
问题背景：
我在我的网站上使用Twitter引导，并为我的网站菜单整合了一个拼贴导航栏。
问题：
NavBar按预期折叠成一个按钮，但当屏幕达到一定宽度时，我在NavBar中的徽标和菜单项分裂成两行。以下是问题所在：
这是页面完全展开并按需要工作的导航栏：
这是与页面稍微最小化和响应，请注意，NavBar现在已经分割成两行。这是，而不是我想要的行为。理想情况下，我希望选择保持在同一条线上，或者折叠成一个按钮：
这显示了NavBar完全崩溃：
代码：
这是我的NavBar标记。我不明白为什么会看到上面不想要的行为，将NavBar分成两行：
<div class
浏览 3提问于2015-06-21得票数 1
回答已采纳
如何使输入type="button"与jquery函数.click()在in和Safari中工作？它在Mozilla、Chrome和Opera上运行良好。例如，点击wenn按钮会显示隐藏的div：
<input type="button" value="Comments(<?php echo $commentCounter?>)" data-id="<?php echo $productArray[$key]["ID"].$_SESSION["userSession"];?>&
浏览 0提问于2016-04-29得票数 0
1回答
我输出多个使用相同<a >的动态链接。我的AJAX调用加载所有链接中的精细内容。但是，显示ajax内容的新div只在单击其他链接时输出第一个链接的id。我使用它来查看控制台console.log($('[data-taskid]').first().attr('data-id'));中的id，如何将单击的链接的id传递给ajax视图？谢谢你们！
<div id="content"></div>
$string .= '<a class="hrefid" data-id="
浏览 2提问于2016-07-07得票数 1
2回答
我的网页上有三个选择框，一旦我选择了第一个框，第二个和第三个框的值应该根据数据-id进行更改，一旦我更改了第一个框，我的第二个和第三个框的值正在改变，但问题是，第二个和第三个框的选项是相同的。我已经给出了下面的代码
var $select1 = $("#select1");
var $select2 = $("#select2");
var $select3 = $("#select3");
$select1.data('options', $select2.html())
$select1.change(function()
浏览 4提问于2015-12-30得票数 1
回答已采纳
2回答
HTML：
<div id="comentario-info">
<b>AngelRmz</b> hace 8 minutos
<div id="comentario-botones" data-id="1">
<div id="comentario-boton" class="comentario-informar" title="Informar"></div>
<div id="co
浏览 5提问于2017-05-26得票数 1
回答已采纳
3回答
在下面的代码中，当我单击Add New时，如何在单击元素的父元素之后移动Add New。
我的一切都是正确的，但我不能做我需要移动它的部分，after()的父母。
你能帮忙吗？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar poll thingy</title>
<script type="text
浏览 0提问于2013-09-08得票数 1
回答已采纳
3回答
CSS
#myMenu ul li {
display: inline;
}
#myMenu ul li a {
background-color:#333333;
text-transform: uppercase;
font-weight: bold;
font-family:"Open Sans", Arial, sans-serif;
font-size:12px;
text-decoration: none;
padding: 1em 2em;
color: #000000;
border
浏览 3提问于2013-09-18得票数 1
回答已采纳
我正在尝试使用javascript jquery创建一个下拉列表。使用zend和doctrine我呈现了framework2元素，如下所示：
<div>
Country<select name="country"><option value="">--select Country-</option>
<option value="1" class="country" id="country">Greater Accra</opt
浏览 0提问于2016-11-23得票数 0
我有一个带有datalist的输入类型文本，其中包含重复的选项值
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
<option value="John" data-id="1"></option>
<option value="George" data-id="2"></option&
浏览 1提问于2018-11-26得票数 6
回答已采纳
我需要用用于javascript的占位符编写一些html。
例：
<span><placeholder data-id="42" data-value="abc"/><span>
稍后，脚本将访问这些占位符并将内容放入(旁边？)他们。
<span><placeholder data-id="42" data-value="abc"><div class="Google"><input type="text" value=&
浏览 0提问于2014-09-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
