Javascript 更改选择选项时自定义下拉列表的文本

我正在使用CSS和香草JavaScript（纯JS）制作一个自定义的

下拉列表。我尝试了以下代码来选择并设置单击某个选项时的
文本
：


window.onload=（）=>{
让[…options]=document.querySelectorAll（'#select.opt'）；
让select=document.getElementById（'select'）；
select.addEventListener（'单击'，（）=>{
options.forEach（opt=>{
opt.classList.toggle（'showOpt'）；
});
});
options.forEach（opt=>{
opt.addEventListener（'click'，event=>{
让optar=select.innerText.split（'\n'）；
optar[0]=opt.innerText；
select.innerText=optar.join（'\n'）；
});
});
}
#选择{
边界：无；
宽度：100px；
填充物：5px；
}
.fas{
浮动：对；
}
.选择{
列表样式：无；
显示：无；
保证金：3倍；
填充：4px；
边框底部：1px纯绿色；
}
.opt：悬停{
背景：白色；
}
.showOpt{
显示：块！重要；
}

一级

级别1
级别2
三级
第4级
您只需将
select
的标题文本加上一个span，以便以后可以将其作为目标，并根据单击项目的
textContent
更改其
textContent


window.onload=（）=>{
让[…options]=document.querySelectorAll（'#select.opt'）；
让select=document.getElementById（'select'）；
const selectHead=document.querySelector（“selectHeader”）；
select.addEventListener（'单击'，（）=>{
options.forEach（opt=>{
opt.classList.toggle（'showOpt'）；
});
});
options.forEach（opt=>{
opt.addEventListener（'click'，event=>{
选择head.textContent=event.target.textContent；
});
});
}
#选择{
边界：无；
宽度：100px；
填充物：5px；
}
.fas{
浮动：对；
}
.选择{
列表样式：无；
显示：无；
保证金：3倍；
填充：4px；
边框底部：1px纯绿色；
}
.opt：悬停{
背景：白色；
}
.showOpt{
显示：块！重要；
}

一级

级别1
级别2
三级
第4级
为所选选项指定样式，单击选项时，将所选类的
内部文本替换为所单击选项的内部文本


window.onload=（）=>{
让[…options]=document.querySelectorAll（'#select.opt'）；
让select=document.getElementById（'select'）；
让selectedOption=document.querySelector（'.visible'）；
select.addEventListener（'单击'，（）=>{
options.forEach（opt=>{
opt.classList.toggle（'showOpt'）；
});
});
options.forEach（opt=>{
opt.addEventListener（'click'，event=>{
selectedOption.innerText=opt.innerText；
});
});
}
#选择{
边界：无；
宽度：100px；
填充物：5px；
}
.fas{
浮动：对；
}
.选择{
列表样式：无；
显示：无；
保证金：3倍；
填充：4px；
边框底部：1px纯绿色；
}
.opt：悬停{
背景：白色；
}
.showOpt{
显示：块！重要；
}
李{
列表样式：无；
}

1级
级别1
级别2
三级
第4级