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

Question

我面前有以下任务，在过去 5 天左右的时间里，我一直在用头撞墙，似乎找不到解决方案。

我想创建一个纯 html 表单，其中包含一个带有多个选项的下拉列表。我想为每个选项分配一个特定的图像，当用户单击表单中的“选择”按钮时会出现该图像。

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

这是我想要实现的截图:

screenshot

当用户选择一个选项并单击“选择”按钮时，页面上应显示一张图片。

感谢您的回答!感谢您的帮助:)

Answer 1

你是这个意思吗？您应该使用 JavaScript，因为代码的第一部分是将功能添加到 HTML 的 JavaScript 代码，在下面的评论中，我写了一些关于如何将 JavaScipt 代码包含到 HTML 文件中的说明。

var pic = document.getElementById('pic');
document.getElementById('select-image').addEventListener(
'change', function(e) {
		pic.src = this.value
})

//Include this code in your HTML file as follows:
//before </body> -body close tag include 
//<srcipt type="text/javascript">
//this whole code above goes here
//</script>

<select id='select-image'>
  <option value="http://i.ndtvimg.com/i/2016-06/wolf_650x400_61465560359.jpg">wolf</option>
  <option value="http://www.picdesi.com/upload/comment/friend/best-friends-quote-pic.jpg">fingers</option>
  <option value="http://www.lovethispic.com/uploaded_images/43547-A-True-Friend.jpg">list</option>
</select>
<img id="pic" src="" alt="">
<script type="text/javascript">
<!-- JavaScript code above comes here -->
</script>

更新:根据评论中的要求，在输入字段中插入任​​何图片的 Web 链接，然后按回车键，您的图片将附加到选择框，当您更改选项时，您会看到不同的图像。

var form = document.getElementById('photos-form'),
formName = document.getElementsByName('photos-form')[0],
select = formName.selectImage,
input = formName.store,
pic = document.getElementById('pic'),
arr = ["http://i.ndtvimg.com/i/2016-06/wolf_650x400_61465560359.jpg"];

form.addEventListener('submit', function() {
    arr.push(input.value);
    input.value = ""
    for(var picture in arr) {
        if(!select.options[picture]) {
            var option = document.createElement('option');
            option.innerHTML = picture;
            option.value = arr[picture];
      	    select.appendChild(option);
        }
    }
    return false;
})

select.addEventListener('change', function(e) {
    pic.src = this.value
})

<form id='photos-form' name="photos-form" action="" method="POST">
  <select name="selectImage" id='select-image'>
       <option value="http://i.ndtvimg.com/i/2016-06/wolf_650x400_61465560359.jpg">wolf</option>
    </select>
    <input id="store" name="store" type="text" />
</form>
<img id="pic" src="" alt="">