Javascript 如何将值向下传递到多个级别

我试图构建一个简单的过滤工具，将值从一个元素传递到其他元素

我已将单击事件添加到顶级div1>输入，并尝试获取单击项目的值，并将其添加到div2中所有值属性的开头

这里的问题是，当我选择一个不同的主题时，它会保留旧主题的值，并添加新主题

有人能帮助我如何使其工作，使其仅将单击主题的值添加到div2中的选项值中吗

提前谢谢

var subjects=document.querySelectorAll（“.div1表单输入”）；
var yearLvls=document.queryselectoral（“.div2选择选项”）；
subject.forEach（subject=>{
subject.addEventListener（“单击”，e=>{
var subjectValue=e.target.value；
年平均值（年平均值=>{
yrLvl.value=主题值+yrLvl.value
console.log（yrLvl.value）
})
})
})

英语
数学
科学类
人文社会科学
艺术
技术
健康和体育
语言文字
工作研究
第一年
第二年
第三年
第四年
第5年
第6年
第7年
第8年
第9年
第10年

您可以在每个

选项中添加一项，以保存原始值，并在分配新值时引用该值

下面是一个例子：


//获取元素
var subjects=Array.from（document.querySelectorAll（“.div1输入”）；
var yearLvls=Array.from（document.queryselectoral（“.div2选择选项”）；
//将值保存到数据集
年份值forEach（（年份值）=>{
yearLvl.dataset.defaultValue=yearLvl.value；
});
//单击添加侦听器
主题。forEach（（主题）=>{
subject.addEventListener（“单击”，（e）=>{
var subjectValue=e.target.value；
年平均值（（年平均值）=>{
yrLvl.value=subjectValue+yrLvl.dataset.defaultValue；
console.log（yrLvl.value）；
});
});
});

英语
数学
科学类
人文社会科学
艺术
技术
健康和体育
语言文字
工作研究
第一年
第二年
第三年
第四年
第5年
第6年
第7年
第8年
第9年
第10年
您可以在每个
选项中添加一项，以保存原始值，并在分配新值时引用该值

下面是一个例子：


//获取元素
var subjects=Array.from（document.querySelectorAll（“.div1输入”）；
var yearLvls=Array.from（document.queryselectoral（“.div2选择选项”）；
//将值保存到数据集
年份值forEach（（年份值）=>{
yearLvl.dataset.defaultValue=yearLvl.value；
});
//单击添加侦听器
主题。forEach（（主题）=>{
subject.addEventListener（“单击”，（e）=>{
var subjectValue=e.target.value；
年平均值（（年平均值）=>{
yrLvl.value=subjectValue+yrLvl.dataset.defaultValue；
console.log（yrLvl.value）；
});
});
});

英语
数学
科学类
人文社会科学
艺术
技术
健康和体育
语言文字
工作研究
第一年
第二年
第三年
第四年
第5年
第6年
第7年
第8年
第9年
第10年
您可以使用JQuery来尝试这一点


$（文档）.ready（函数（）{
$（this）.on（“更改”，“输入[name='subjects']”，函数（e）{
$（“#subject_name”）.html（$（this.val（））；
});
});

英语
数学
科学类
人文社会科学
艺术
技术
健康和体育
语言文字
工作研究
请选择主题
第一年
第二年
第三年
第四年
第5年
第6年
第7年
第8年
第9年
第10年
您可以使用JQuery来尝试这一点


$（文档）.ready（函数（）{
$（this）.on（“更改”，“输入[name='subjects']”，函数（e）{
$（“#subject_name”）.html（$（this.val（））；
});
});

英语
数学
科学类
人文社会科学
艺术
技术
健康和体育
语言文字
工作研究
请选择主题
第一年
第二年
第三年
第四年
第5年
第6年
第7年
第8年
第9年
第10年
将事件侦听器放在每个元素上有点低效。您可以改为向包含所有输入的div父元素添加一个事件侦听器，并查找将满足所选元素的event.target.closest，然后获取所需的值并将其存储在上下文变量中。从那里你可以随心所欲地利用价值。试试这个小片段，看看它是否解决了你想要做的事情。我在那里留下了一个console.log，这样您就可以在控制台上看到代码在做什么


document.querySelector（“.div1”）.addEventListener（“单击”，（e）=>{
常数