如何根据每个下拉菜单显示图像？
[英]How to make an image appear based on each dropdown menu?
问题描述
What I am trying to do is to is to make an image appear upon selection. 
我想做的是使图像在选择时出现。 For example, if I select the first drop down menu, "iPhone 5S", an image of an iPhone 5S appears. 例如，如果我选择第一个下拉菜单“ iPhone 5S”，则会显示iPhone 5S的图像。 Then the second drop down menu, when I select "Global - iPhone 5S" a different image appear - but the first one still remains. 然后是第二个下拉菜单，当我选择“全局-iPhone 5S”时，会显示不同的图像-但第一个仍然保留。 So essentially, I am asking how do I make 2 different images appear based on different selection? 因此，从本质上讲，我在问如何根据不同的选择显示2张不同的图像？ This is killing me and I am not really good with either HTML or JS. 这真让我丧命，无论是HTML还是JS我都不是很好。 Please help. 请帮忙。 Thanks. 谢谢。
<script type="text/javascript">
var firmwares = {};
firmwares[1] = {"7.0.2 (Global - iPhone 5S)" :"http://www.abc.com",
"7.0.2 (GSM - iPhone 5S)" :"http://www.abc.com",
"7.0.1 (Global - iPhone 5S)" :"http://www.abc.com",
"7.0.1 (GSM - iPhone 5S)" :"http://www.abc.com",};
firmwares[2] = {"7.0.2 (Global - iPhone 5C)" :"http://www.abc.com",
"7.0.2 (GSM - iPhone 5C)" :"http://www.abc.com",
"7.0.1 (Global - iPhone 5C)" :"http://www.abc.com",
"7.0.1 (GSM - iPhone 5C)" :"http://www.abc.com",};
function fillSelect(inX,inY){
inY.options.length = 1;
var curr = firmwares[inX];
for (each in curr)
{var nOption = document.createElement('option');
nOption.appendChild(document.createTextNode(each));
nOption.setAttribute("value",each);
inY.appendChild(nOption);}
document.getElementById("gotoLink") = "none";}
function openLink(inA, inB) {
var gotoLink = document.getElementById("GotoLink");
gotoLink.href = firmwares[inA][inB];}
</script>
<body>
<form name="container" method="post" action="">
<div>
<select name="phones" style="position: absolute; top: 15px; left: 12px;" onchange="fillSelect(this.value,this.form['firmwares'])">
<option value=""><Select iOS Device></option>
<option value="1">iPhone 5S</option>
<option value="2">iPhone 5C</option>
</select>
<select name='firmwares' style="position: absolute; top: 15px; left: 533px;" onchange="openLink(this.form['phones'].value, this.value)" >
<option value=""><Select iOS Firmware></option>
</select>
<button style="position: absolute; top: 375px; left: 750px;"><a id="GotoLink" href="#">Download Firmware</href></button>
</div>
</form>
</body>
1 个解决方案
解决方案1
0 已采纳 2013-10-24 16:15:01
Hope this is helpful 希望这会有所帮助
<html>
<head>
<script type="text/javascript">
var phoneImages = ["", "http://images.apple.com/home/images/home_iphone5s_hero_small.png", "http://images.apple.com/iphone-5c/home/images/capable_green_ipad_l.png"];
var firmwares = {};
firmwares[1] = {"7.0.2 (Global - iPhone 5S)" :["http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_black_ipad_l.jpg"],
"7.0.2 (GSM - iPhone 5S)" :["http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_blue_ipad_l.jpg"],
"7.0.1 (Global - iPhone 5S)" :["http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_green_ipad_l.jpg"],
"7.0.1 (GSM - iPhone 5S)" :["http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_white_ipad_l.jpg"],};
firmwares[2] = {"7.0.2 (Global - iPhone 5C)" :["http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_pink_ipad_l.jpg"],
"7.0.2 (GSM - iPhone 5C)" :["http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_green_ipad_l.jpg"],
"7.0.1 (Global - iPhone 5C)" :["http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_white_ipad_l.jpg"],
"7.0.1 (GSM - iPhone 5C)" :["http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_pink_ipad_l.jpg"]};
function fillSelect(inX,inY){
inY.options.length = 1;
var curr = firmwares[inX];
for (each in curr)
{
var nOption = document.createElement('option');
nOption.appendChild(document.createTextNode(each));
nOption.setAttribute("value",each);
inY.appendChild(nOption);
}
document.getElementById("GotoLink").style.display = "none";
document.getElementById("phoneImg").src = phoneImages[inX];
document.getElementById("phoneImg").style.display = "";
document.getElementById("firewareImg").style.display = "none";
}
function openLink(inA, inB) {
var gotoLink = document.getElementById("GotoLink");
gotoLink.href = firmwares[inA][inB][0];
document.getElementById("firewareImg").src = firmwares[inA][inB][1];
document.getElementById("firewareImg").style.display = "";
}
</script>
</head>
<body>
<form name="container" method="post" action="">
<select name="phones" onchange="fillSelect(this.value,this.form['firmwares'])">
<option value=""><Select iOS Device></option>
<option value="1">iPhone 5S</option>
<option value="2">iPhone 5C</option>
</select>
<select name='firmwares' onchange="openLink(this.form['phones'].value, this.value)" >
<option value=""><Select iOS Firmware></option>
</select>
<button ><a id="GotoLink" href="#">Download Firmware</href></button>
</form>
<br/>
<img id="phoneImg" style="display:none; width:100px; height:100px" src=""></img>
<img id="firewareImg" style="display:none" src=""></img>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使图像成为下拉菜单 - Make Image a DropDown menu
如何使顶部菜单中的下拉菜单无延迟/动画显示？ - How to make the dropdown in the top menu to appear without delay/animation?
使下拉菜单超时显示在悬停上 - Make dropdown menu appear on hover with a timeout
如何制作下拉菜单 - How to make dropdown menu
如何使用 p5js 使图像在每次点击时循环显示 - How to make an image appear cyclically on each click with p5js
如何使我的下拉菜单显示/对齐 - how to get my dropdown menu to appear/align
如何使此下拉菜单与其父级显示在同一行？ - How can I make this dropdown menu appear on the same line as its parent?
HTML & Javascript - 选择下拉菜单选项时显示文本 - HTML & Javascript - make text appear when dropdown menu option selected
根据下拉菜单更改图片来源 - change image src based on dropdown menu
如何使下拉菜单响应？ - How to make dropdown menu responsive?
相关标签