如何根據每個下拉菜單顯示圖像？

我想要做的是在選擇時顯示圖像。例如，如果我選擇第一個下拉菜單「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>

來源

2013-10-21 umtek12

希望這是有益

<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-24 16:15:01 Cary

鏈路沒有工作在第一，但發現它是「無」。感謝您的幫助。你把我的大腦從內心炸掉了。 – umtek12

抱歉再次打擾你。我有另一個問題張貼（PHP聯繫表格），我想知道你是否可以提供幫助。感謝您以前的所有幫助。謝謝。 – umtek12

如何根據每個下拉菜單顯示圖像？

回答

相關問題