如何在单击时将属性值附加到隐藏输入中的逗号分隔列表或从中删除属性值
在单击时将属性值附加到隐藏输入中的逗号分隔列表或从中删除属性值，可以通过以下步骤实现：
- 首先，需要在HTML中创建一个隐藏的输入框，用于存储属性值的逗号分隔列表。可以使用
<input type="hidden">标签来创建隐藏输入框。 - 在单击事件的处理函数中，获取要附加或删除的属性值。可以通过JavaScript来获取属性值，例如使用
getAttribute()方法或直接访问元素的属性。 - 接下来，需要判断属性值是否已经存在于逗号分隔列表中。可以使用JavaScript的字符串操作方法，如
split()将逗号分隔列表转换为数组，然后使用indexOf()方法检查属性值是否存在于数组中。 - 如果属性值不存在于逗号分隔列表中，可以使用字符串的拼接操作将属性值附加到逗号分隔列表的末尾。可以使用
+=操作符将属性值添加到逗号分隔列表的末尾，并在属性值之间添加逗号。 - 如果属性值已经存在于逗号分隔列表中，可以使用字符串的替换操作将属性值从逗号分隔列表中删除。可以使用
replace()方法将属性值从逗号分隔列表中移除，并将逗号和空格一起替换为空字符串。 - 最后，将更新后的逗号分隔列表赋值给隐藏输入框的
value属性，以便将其提交到服务器或在后续的操作中使用。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>属性值操作示例</title>
</head>
<body>
<input type="hidden" id="attributeList" value="">
<button onclick="addOrRemoveAttributeValue('value1')">添加/删除属性值1</button>
<button onclick="addOrRemoveAttributeValue('value2')">添加/删除属性值2</button>
<script>
function addOrRemoveAttributeValue(value) {
var attributeListInput = document.getElementById('attributeList');
var attributeList = attributeListInput.value;
// 检查属性值是否已经存在于逗号分隔列表中
if (attributeList.split(',').indexOf(value) === -1) {
// 属性值不存在于逗号分隔列表中，将其附加到末尾
attributeList += (attributeList ? ', ' : '') + value;
} else {
// 属性值已经存在于逗号分隔列表中，将其从列表中删除
attributeList = attributeList.replace(value + ', ', '').replace(', ' + value, '');
}
// 更新隐藏输入框的值
attributeListInput.value = attributeList;
}
</script>
</body>
</html>在这个示例中，我们创建了一个隐藏的输入框attributeList来存储属性值的逗号分隔列表。通过点击按钮调用addOrRemoveAttributeValue()函数来添加或删除属性值。函数首先获取隐藏输入框的值，然后根据属性值是否存在于逗号分隔列表中进行相应的操作，最后更新隐藏输入框的值。
请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。
相关·内容
我有一些颜色作为无序列表中的列表项。我希望列表项目属性值在单击时以逗号分隔列表(例如红色、蓝色、绿色)的形式添加到我的隐藏输入中。当值已经存在于列表中时，我希望将其从列表中删除<
浏览 37提问于2019-04-23得票数 0
回答已采纳
嗨，我遇到了一个非常烦人的问题，我试图将隐藏输入的值设置为一个从数据库中获取的逗号分隔列表，但在纯CSV格式下，它不会设置该值。input标签和ul标签看起来像这样(我知道asp:hiddenfield和它的value属性，但我没有使用它，因为我仍然有这个问题)：
<ul id="keywords" runat=&quo
浏览 1提问于2011-09-30得票数 0
我有一个包含复选框列表的<form>标记。当表单enctype = application/x-www-form-urlencoded时，多个选中的复选框值将按预期通过Request.Form作为逗号分隔字符串呈现给我。如果我将容器类型更改为multipart/form-data (因为我希望在提交中包含一个概要文件映像)，那么尽管请求有效负载中存在所有选中的
浏览 1提问于2012-10-30得票数 1
回答已采纳
1回答
稍后，此电子表格将通过我编写的C#命令行程序导出为不同的格式，以便将数据转储到不同的系统中。我需要输入的数据值完全如命令行程序所期望的那样，因此由于打字错误或轻微的措辞差异导致的用户错误将是有问题的。我需要用户从可能的值中进行选择，而不是依赖用户输入正确的值
浏览 2提问于2014-04-27得票数 6
1回答
我有一个Listview，显示了我的文件系统中一个文件夹的多个文件条目。我想使ListView的多个条目可选，就像在dropbox中选择文件fpr移动，删除等。这是我目前的ListView： </
浏览 0提问于2014-01-23得票数 0
1回答
我可以将字符串放入html输入字段的value属性中多长时间？<input type="text" value="how-long-long-long-long" size="21" />
我试图将逗号分隔的值添加到隐藏的文本字段中--但是这些值是
浏览 5提问于2015-06-30得票数 0
回答已采纳
1回答
如何在PHP中删除逗号分隔列表中的重复值？
我有两个版本的客户问卷-一个比另一个更详细-其中一个被要求他们喜欢的项目，在另一个他们被要求按排名顺序指定他们喜欢的项目。在此特定示例中，其中一列('items_like')可能包含逗号分隔列表中的多个值
浏览 0提问于2013-02-24得票数 0
回答已采纳
我使用jquery的Append将值添加到列表框中。我只需在HTML中编写一个选项，然后在单击按钮时将其追加。如何将这些不存在的<e
浏览 2提问于2011-12-01得票数 0
回答已采纳
我有一个用户可以选择的项目列表。我希望它比标准的复选框更加用户友好，所以我将div分开，每个div都有一个唯一的id。当用户单击一个项目时，我使用javascript在该项目顶部显示一个记号，并更改样式以显示它是突出显示的。
我正在尝试解决如何在提交表单时传递id列表。请记住，如果用户取消勾选某个项目，则应将其从列表中删除。我正在考虑在隐
浏览 0提问于2010-06-15得票数 0
回答已采纳
1回答
我有一张书单，书名叫bookList每本书都有许多属性，如bookTitle、author、quantity和isbn。我的程序从读取csv文件开始，该文件有5行，每行都有逗号分隔的值，从bookTitle的名称开始一直到该行的末尾，这是零售价。读取文件是没有问题的，但我的问题是，在我的程序中，您可以操作
浏览 1提问于2018-02-11得票数 0
回答已采纳
如何从mData属性获取给定的单元格值？我有以下的表格初始化代码，我动态地将单元格值添加到我的表格特定列中，并且我想使用单击的行隐藏单元格值来定义data-id。如果我报警(source)，我可以看到逗号分隔的数据字符串。我想把第一个值隐藏起来。
浏览 0提问于2013-01-07得票数 0
在我正在开发的web应用程序上，我有一个表，用户可以在其中选择多行，然后页面可以使用JavaScript在AJAX请求中将所选行的in发送到后端控制器。目前的方法是，JavaScript代码将这些in作为逗号分隔的列表写入隐藏的HTML元素的值中，然后在AJAX请求中发送整个列表。这是可行的，但是后端控制器必须将列表</
浏览 26提问于2021-01-16得票数 0
index" collection="list" separator=","> </foreach>PhoneModel有三个属性它提到我可以将多个属性名(如createTime)添加到keyProperty和keyColumn中。keyProperty (仅插入和更新)标识MyBatis将设置getGenera
浏览 1提问于2017-02-22得票数 2
我是coldfusion的新手。我需要些帮助。我的数据库有如下公司名称的记录: abc，Inc.目前我正在使用以下查询：
SELECT DISTINCT COMPANY FROM ComapanyTable WHERE (Company IN我需要按原样得到列表，即：'abc，Inc.'，'xyz，Inc‘，以便以后我可以将这些值插入到新的表中。insertSelect.Company,';' )#&q
浏览 4提问于2015-03-12得票数 2
回答已采纳
我使用的是spring portlet版本( spring 4.1)。
浏览 11提问于2018-04-02得票数 0
我想知道是否有将值从文件传递到Jenkins参数之一的选项。例如:我有一个名为config.properties的属性文件，我想将一个名为projectName的字段的值传递给一个名为Project的Jenkins参数。我该怎么做呢？
浏览 2提问于2014-07-09得票数 3
我想为一次输入写下我的邮件地址。
但是当我写";“分隔符时，我的输入抛出了"invalid email”错误。有人能帮我吗？
浏览 0提问于2020-12-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
