图片来源更改取决于选择的选项

Question

我解决了问题。我只是删除了VAR iimg并添加到功能

document.getElementByID("compareimg1").src = "../images/galaxy_s4.png"; 

form标签：

<form> 
      <select id="select1" onchange="func1()"> 
       <option disabled selected value="choose1"> 
        CHOOSE 
       </option> 
       <option value="i2g" id="i2g"> 
        iPhone 2g 
       </option> 
      </select> 
     </form> 

表标签：

<table id="comparetable1" class="ib5" border="1"> 
      <tr> 
       <td id="logotd"> 
        <img src="../images/logo.png" id="logoimg" /> 
       </td> 
       <td id="compareimg1td"> 
        <img id="compareimg1" /> 
       </td> 
       <td id="compareimg2td"> 
        <img src="../images/galaxy_s.png" id="compareimg2" /> 
       </td> 
      </tr> 
     </table> 

和脚本：

<script> 
      var ip2g = document.getElementById("i2g"); 
      var iimg = document.getElementById("compareimg1").src; 
      function func1(){ 
       if (ip2g.selected === true){ 
        iimg = "../images/galaxy_s4.png"; 
       } 
      } 
     </script> 

问题是，当我选择一个opti从下拉菜单中，它不会在表格中加载图像。

Answer 1

的问题是，typeof iimg是string，所以更新iimg不会改变图像的src（only objects are passed by reference）。

因此，你需要：

var ip2g = document.getElementById("i2g"); 
var iimg = document.getElementById("compareimg1"); 
function func1(){ 
    if (ip2g.selected === true){ 
     iimg.src = "../images/galaxy_s4.png"; 
    } 
} 

Answer 2

如何比较选择值，改变SRC这样吗？

var iimg = document.getElementById("compareimg1"); 

function func1(){ 
    if (document.getElementById("select1").value == "i2g"){ 
     iimg.src = "../images/galaxy_s4.png"; 
    } 
}