同一选项卡中的Javascript弹出窗口

我正在寻求帮助解决我遇到的一个问题，我已经试过很多次让它正常工作

我希望能够通过选择数据列表上的项目打开特定的弹出窗口，每个项目都会打开自己的弹出窗口，其中都有关于用户选择的特定表单。例如，选择general fitness并按submit可打开general fitness弹出窗口

我一直在将弹出式url添加到选择中，但没有打开弹出式url

HTML是我的，但我发现了一个脚本，它看起来有点像我需要的，只是它在一个新窗口中打开了一个链接。也许可以对其进行编辑以节省时间

任何帮助都将不胜感激

函数goToNewPage（）{
if（document.getElementById（'target'）.value）{
window.location.href=document.getElementById（'target'）。值；
}
}

选择
谷歌
Search.com
狗堆
搜索

我为每个可用选项添加了弹出窗口，还添加了一些JavaScript以根据当前选择打开特定的弹出窗口。我已经添加了一些基本的样式，每个弹出窗口上都有一个关闭按钮，并且稍微整理了一下HTML代码

函数goToNewPage（）{
if（document.getElementById（'target'）.value）{
window.location.href=document.getElementById（'target'）。值；
}
}
var search=document.getElementsByClassName（“搜索按钮”）[0]；
var datalist=document.getElementsByClassName（“类别”）[0]；
var popups=document.getElementsByClassName（“popup”）；
search.addEventListener（“单击”，函数（）{
var popupsLength=popups.length；
for（设x=0；x

.popup{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：95%；
身高：95%；
最大高度：750px；
最大宽度：1000px；
背景：白色；
盒影：0.20px rgba（0,0,0,0.3）；
填充：10px；
溢出：自动；
显示：无；
z指数：100；
}
.退出{
位置：绝对位置；
排名：0；
右：0；
填充：10px 15px；
背景:#dd3333；
颜色：白色；
字体大小：20px；
过渡：0.2s；
}
.退出：悬停{
背景：#ee4444；
光标：指针；
}

选择
谷歌
Search.com
狗堆
搜索
一般健康
Lorem ipsum dolor sit amet，是一位杰出的献身者。狮子座的佩伦茨克舌苔（Pellentesque id Legula pretium tellus molectie rhoncus vel）。埃尼安·瓦里乌斯·贾斯托·埃利特（Aenean varius justo elit）和尤伊斯莫·利奥·萨吉蒂斯（euismod leo sagittis）在一家酒店工作。连绵花。但我的名字是尼西。毛茸茸
我不能去洛博蒂斯。有权势的turpis，无权势的interdum ac，euismod augue。在索达莱斯，奥特莱斯的洛博蒂斯广场。Donec id scelerisque sapien。整型leo massa，aliquet ac est，mollis porttitor sem。梅塞纳斯是一位精英。等分
弗林尼利亚·波苏尔·乌纳·维塔饮食。在laoreet lorem Legula Egula nisl中，使用ultricies、lectus quis tempor efficitur、dolor enim前庭mauris

✖；
拳击
Lorem ipsum dolor sit amet，是一位杰出的献身者。狮子座的佩伦茨克舌苔（Pellentesque id Legula pretium tellus molectie rhoncus vel）。埃尼安·瓦里乌斯·贾斯托·埃利特（Aenean varius justo elit）和尤伊斯莫·利奥·萨吉蒂斯（euismod leo sagittis）在一家酒店工作。连绵花。但我的名字是尼西。毛茸茸
我不能去洛博蒂斯。有权势的turpis，无权势的interdum ac，euismod augue。在索达莱斯，奥特莱斯的洛博蒂斯广场。Donec id scelerisque sapien。整型leo massa，aliquet ac est，mollis porttitor sem。梅塞纳斯是一位精英。等分
弗林尼利亚·波苏尔·乌纳·维塔饮食。在laoreet lorem Legula Egula nisl中，使用ultricies、lectus quis tempor efficitur、dolor enim前庭mauris

✖；
瑜伽
Lorem ipsum dolor sit amet，是一位杰出的献身者。狮子座的佩伦茨克舌苔（Pellentesque id Legula pretium tellus molectie rhoncus vel）。埃尼安·瓦里乌斯·贾斯托·埃利特（Aenean varius justo elit）和尤伊斯莫·利奥·萨吉蒂斯（euismod leo sagittis）在一家酒店工作。连绵花。但我的名字是尼西。毛茸茸
我不能去洛博蒂斯。有权势的turpis，无权势的interdum ac，euismod augue。在索达莱斯，奥特莱斯的洛博蒂斯广场。Donec id scelerisque sapien。整型leo massa，aliquet ac est，mollis porttitor sem。梅塞纳斯是一位精英。等分
弗林尼利亚·波苏尔·乌纳·维塔饮食。在laoreet lorem Legula Egula nisl中，使用ultricies、lectus quis tempor efficitur、dolor enim前庭mauris

✖；
混合武术
Lorem ipsum dolor sit amet，是一位杰出的献身者。狮子座的佩伦茨克舌苔（Pellentesque id Legula pretium tellus molectie rhoncus vel）。埃尼安·瓦里乌斯·贾斯托·埃利特（Aenean varius justo elit）和尤伊斯莫·利奥·萨吉蒂斯（euismod leo sagittis）在一家酒店工作。连绵花。但我的名字是尼西。毛茸茸
我不能去洛博蒂斯。有权势的turpis，无权势的interdum ac，euismod augue。在索达莱斯，奥特莱斯的洛博蒂斯广场。Donec id scelerisque sapien。整型leo massa，aliquet ac est，mollis porttitor sem。梅塞纳斯是一位精英。等分
弗林尼利亚·波苏尔·乌纳·维塔饮食。在老里叶叶舌兰中，有雌蛾、小叶夜蛾、多罗-埃尼氏前庭毛叶

✖；
白领拳击
Lorem ipsum dolor sit amet，是一位杰出的献身者。佩伦特斯