如何使用数组(javascript)将图像链接到下拉列表值?

如何使用数组(javascript)将图像链接到下拉列表值?,javascript,html,Javascript,Html,我面临着以下任务,在过去的5天左右的时间里,我的头撞到了墙上,似乎找不到解决办法 我想创建一个简单的html表单,其中包含一个带有多个选项的下拉列表。对于每个选项,我想指定一个特定的图像,当用户单击表单中的“选择”按钮时,该图像将出现 我的目标是在javascript中使用数组,并以某种方式将图像链接到下拉列表中的选项。问题是——我不知道怎么做。本例中的另一个问题是,每个映像都存储在不同的服务器上,因此对我来说,寻址源是另一个问题 以下是我试图实现的目标的屏幕截图: 当用户选择一个选项并点击“选

我面临着以下任务,在过去的5天左右的时间里,我的头撞到了墙上,似乎找不到解决办法

我想创建一个简单的html表单,其中包含一个带有多个选项的下拉列表。对于每个选项,我想指定一个特定的图像,当用户单击表单中的“选择”按钮时,该图像将出现

我的目标是在javascript中使用数组,并以某种方式将图像链接到下拉列表中的选项。问题是——我不知道怎么做。本例中的另一个问题是,每个映像都存储在不同的服务器上,因此对我来说,寻址源是另一个问题

以下是我试图实现的目标的屏幕截图:

当用户选择一个选项并点击“选择”按钮时,页面上会出现一张图片

谢谢你的回答!
非常感谢您的帮助:

这里是一个示例,使用一个数组,包含选项id、文本和图像的url/路径,可以使用for..loop和array.push{…}轻松地从数据库中填充它

var期权=[]; options.push{id:0,文本:…请选择..,url:}; options.push{id:1,文本:第一,url:https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/A_small_cup_of_coffee.JPG/275px-A_small_cup_of_coffee.JPG} ; options.push{id:2,文本:第二,url:http://sawadacoffee.com/wp-content/uploads/Sawada-Coffee-10DEC2015-003.jpg} ; options.push{id:3,文本:第三,url:http://www.menshealth.com/sites/menshealth.com/files/coffee-mug.jpg} ; options.push{id:4,文本:第四,url:http://www.seriouseats.com/images/2015/08/20150818-coffee-beans-shutterstock_71813833.jpg} ; options.push{id:5,文本:第五,url:https://static1.squarespace.com/static/524b0cc5e4b052d320043cd2/t/5261693fe4b0c00e49809c00/1382115659249/coffee-cup.jpg?format=2500w} ; forvar i=0,length=options.length;i<长度;我++{ var opt=document.createElementoption; opt.value=options[i].id; opt.text=options[i].text; dropdownstest.options.addopt; } dropdownTest.onchange=函数{ var elem=typeof this.selectedIndex==undefined?window.event.srcement:this; var value=elem.value | | elem.options[elem.selectedIndex].value; imageTest.src=选项[value].url; }; 图像测试{ 宽度:自动; 高度:200px; }
这就是你的意思吗?您应该使用JavaScript,因为代码的第一部分是添加到HTML中的JavaScript代码,在下面的注释中,我编写了一种关于如何将JavaScipt代码包含到HTML文件中的说明

var pic=document.getElementById'pic'; document.getElementById'select-image'。addEventListener “改变”,函数e{ pic.src=this.value } //将此代码包括在HTML文件中,如下所示: //before-body close标记包括 // //上面的全部代码都在这里 // 狼 手指 列表
在这里展示一些你到目前为止尝试过的代码?你能包括你在问题中尝试过的html和javascript吗?为什么你把它弄得那么复杂?@developer complex?这很基本。。我使用数组并构建选项和图像源,因为我希望他将其存储在数据库中,等等,需要能够编辑它而无需编辑html代码。。。这是2016年,快17岁了。我认为他不会从你写的东西中理解一些东西,因为他是新手,你已经通过算法完成了,我知道现在快到2017年了,所以使用80年代的方式,人们没有准确地编码非常感谢你的回答,但对于我的这个项目,我需要使用数组。我需要将图像存储在一个数组中,然后将它们链接到下拉列表中的选项。你能给我一个关于数组的提示吗?