Javascript 如何根据每个下拉菜单显示图像？_Javascript_Html_Drop Down Menu

Javascript 如何根据每个下拉菜单显示图像？

javascript html drop-down-menu

Javascript 如何根据每个下拉菜单显示图像？,javascript,html,drop-down-menu,Javascript,Html,Drop Down Menu,我想做的是在选择时显示一个图像。例如，如果我选择第一个下拉菜单“iphone5s”，就会出现iphone5s的图像。然后第二个下拉菜单，当我选择“Global-iPhone5S”时，会出现一个不同的图像，但第一个图像仍然保留。所以本质上，我是在问如何根据不同的选择使两个不同的图像出现？这简直让我受不了，我对HTML或JS都不是很在行。请帮忙。谢谢 <script type="text/javascript"> var firmw

我想做的是在选择时显示一个图像。例如，如果我选择第一个下拉菜单“iphone5s”，就会出现iphone5s的图像。然后第二个下拉菜单，当我选择“Global-iPhone5S”时，会出现一个不同的图像，但第一个图像仍然保留。所以本质上，我是在问如何根据不同的选择使两个不同的图像出现？这简直让我受不了，我对HTML或JS都不是很在行。请帮忙。谢谢

<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="">&#60;Select iOS Device&#62;</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="">&#60;Select iOS Firmware&#62;</option>
                    </select>
                        <button style="position: absolute; top: 375px; left: 750px;"><a id="GotoLink" href="#">Download Firmware</href></button>
                </div>
                </form>
            </body>


var firmware={}；
firmware[1]={“7.0.2（全球-iphone5s）”：http://www.abc.com",
“7.0.2（GSM-iPhone 5S）”：http://www.abc.com",
“7.0.1（全球-iPhone 5S）”：http://www.abc.com",
“7.0.1（GSM-iPhone 5S）”：http://www.abc.com",};
firmware[2]={“7.0.2（全球-iphone5c）”：http://www.abc.com",
“7.0.2（GSM-iPhone 5C）”：http://www.abc.com",
“7.0.1（全球-iPhone 5C）”：http://www.abc.com",
“7.0.1（GSM-iPhone 5C）”：http://www.abc.com",};
函数fillSelect（inX，inY）{
inY.options.length=1；
var curr=固件[inX]；
用于（每种货币）
{var nOption=document.createElement（'option'）；
appendChild（document.createTextNode（每个））；
nOption.setAttribute（“值”，每个）；
inY.appendChild（nOption）；}
document.getElementById（“gotoLink”）=“无”；}
函数openLink（inA、inB）{
var gotoLink=document.getElementById（“gotoLink”）；
gotoLink.href=firmware[inA][inB]；}
<选择iOS设备>；
iphone5s
iphone5c
<选择iOS固件>；
下载固件

希望这有帮助

<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="">&#60;Select iOS Device&#62;</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="">&#60;Select iOS Firmware&#62;</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>


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 firmware={}；
firmware[1]={“7.0.2（全球-iphone5s）”：[“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（全球-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"],};
firmware[2]={“7.0.2（全球-iphone5c）”：[“http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_pink_ipad_l.jpg"],
“7.0.2（GSM-iPhone5c）”：[“http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_green_ipad_l.jpg"],
“7.0.1（全球-iPhone 5C）”：[“http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_white_ipad_l.jpg"],
“7.0.1（GSM-iPhone5c）”：[“http://www.abc.com", "http://images.apple.com/iphone-5c/home/images/color_blue_pink_ipad_l.jpg"]};
函数fillSelect（inX，inY）{
inY.options.length=1；
var curr=固件[inX]；
用于（每种货币）
{
var nOption=document.createElement（'option'）；
appendChild（document.createTextNode（每个））；
nOption.setAttribute（“值”，每个）；
附属物儿童（无选项）；
}
document.getElementById（“GotoLink”）.style.display=“无”；
document.getElementById（“phoneImg”）.src=phoneImages[inX]；
document.getElementById（“phoneImg”）.style.display=“”；
document.getElementById（“firewareImg”）.style.display=“无”；
}
函数openLink（inA、inB）{
var gotoLink=document.getElementById（“gotoLink”）；
gotoLink.href=firmware[inA][inB][0]；
document.getElementById（“firewareImg”）.src=firmware[inA][inB][1]；
document.getElementById（“firewareImg”）.style.display=“”；
}
<选择iOS设备>；
iphone5s
iphone5c
<选择iOS固件>；
下载固件

该链接起初不起作用，但发现是“无”。感谢您的帮助。你救了我的大脑，让我免于内爆。很抱歉再次打扰你。我有另一个问题（php联系表），我想知道你是否能帮忙。谢谢你以前的帮助。非常感谢。