Img源更改取决于select中选择的选项

Question

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

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

表格标签：

<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>

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

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";
    }
}