0

我想要做的是让图像在选择时出现。例如，如果我选择第一个下拉菜单“iPhone 5S”，就会出现 iPhone 5S 的图像。然后第二个下拉菜单，当我选择“全局 - iPhone 5S”时，会出现一个不同的图像 - 但第一个仍然存在。所以本质上，我在问如何根据不同的选择使 2 个不同的图像出现？这让我很生气，而且我对 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>
4

1 回答 1

0

希望这会有所帮助

<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>
于 2013-10-24T16:15:01.013 回答