Question

我面前有以下任务，在过去5天左右我一直撞到墙上，似乎无法找到解决方案。

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

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

以下是我想要实现的截图：

screenshot

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

感谢您的回答！我很感激帮助：）

Answer 1

这是你的意思吗？您应该使用JavaScript，因为代码的第一部分是JavaScript代码，它将HTML添加到该功能中，在下面的注释中我写了一些关于如何将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链接并按Enter键，您的图片将附加到选择框，当您更改选项时，您会看到不同的图像。

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="">

Answer 2

这是一个示例，使用包含选项id，text和url / path到image的单个数组，可以使用for..loop和array.push（{...}）轻松地从数据库中填充它。

＆＃13;

var options = [ ];
  options.push( {id: 0, text: "..Please Select..", url: ""} );
  options.push( {id: 1, text: "Number One", 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, text: "Number Two", url:"http://sawadacoffee.com/wp-content/uploads/Sawada-Coffee-10DEC2015-003.jpg"} );
  options.push( {id: 3, text: "Number Three", url:"http://www.menshealth.com/sites/menshealth.com/files/coffee-mug.jpg"} );
  options.push( {id: 4, text: "Number Four", url:"http://www.seriouseats.com/images/2015/08/20150818-coffee-beans-shutterstock_71813833.jpg"} );
  options.push( {id: 5, text: "Number Five", url:"https://static1.squarespace.com/static/524b0cc5e4b052d320043cd2/t/5261693fe4b0c00e49809c00/1382115659249/coffee-cup.jpg?format=2500w"} );

for(var i = 0, length = options.length; i < length; i++){
  var opt = document.createElement("option");
      opt.value = options[i].id;
      opt.text = options[i].text;
      dropdownTest.options.add(opt);
}

dropdownTest.onchange = function() {
    var elem = (typeof this.selectedIndex === "undefined" ? window.event.srcElement : this);
    var value = elem.value || elem.options[elem.selectedIndex].value;
    imageTest.src = options[value].url;
};

＆＃13;

#imageTest {
  width: auto;
  height: 200px;
}

＆＃13;

<select id="dropdownTest"></select>
<br />
<image id="imageTest"></image>

＆＃13;

如何使用数组（javascript）将图像链接到下拉列表值？

2 个答案: