Javascript 基于下拉列表和图像链接更改图像

在这里进一步阐述这个问题：

根据问题中基于选择选项更改图像的方法，我如何更改

---

既然您现在正在做多项工作，最好将更改代码分解为它自己的函数。但基本上，您需要访问

a

标记的

href

属性，访问方式与访问

img

标记上的

src

相同

<script>
    var colorUrlMap = {
        "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
        //Add more here
        "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
    };

    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value];
        document.getElementById('link_id').href = colorUrlMap[el.value];
    }
</script>
<select name="Color:" onchange="changeSelect(this)">
    <option value="Black/White">Black/White</option>
    <!-- Add more here -->
    <option value="White/Red/Black">White/Red/Black</option>
</select>

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage"> 

example:

<a id="link_id" href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

更新2

要解决有关单选按钮的评论中的问题，请回答“是”。根据您的代码示例，当前您在收音机的

onclick

事件上有一个表单提交。你需要改变这一点。但是，使用

单选按钮的诀窍在于，您只想使用所选单选按钮的值。如果在收音机上使用
onchange
事件，则在选择和取消选择时都会触发

因此，如果要对收音机和选择器使用相同的函数，可以将setter行包装到if语句中：

function changeColor(el) {
    if (el.nodeName != "INPUT" || el.checked) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
}

这应该适用于
选择
，
输入[type=radio]
，以及
输入[type=checkbox]
。您可以将其放入
onclick
、
onchange
或
onkeyup
处理程序中。（
onkeyup
在使用键盘更改值时效果很好。）
非常感谢，这非常有效！出于好奇，是否可以使用下面的示例这样的方法来做同样的事情？
“$row['color\u name']”。
“请用新的示例更新您的问题（这样我们可以获得正确的格式..代码在注释中不起作用）。此外，如果您需要，请不要忘记标记答案。谢谢您的帮助，但我正在阅读您应该将收音机包装在div中，并收听div mouseover事件（这正是我需要的）.我认为更大的问题是，我的收音机被隐藏起来，并用标签onclick调用。你有什么建议，可以用鼠标悬停在标签上的隐藏收音机来改变这种情况吗. Thanks@ChrisKsag：我理解。这将被视为一个不同的问题，因为它超出了您上述问题的范围。如果我的解决方案解决了上述问题，请将其标记为答案。在任何情况下，请发布具有新标准的新问题。谢谢！
<script>
    var colorUrlMap = {
        "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
        //Add more here
        "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
    };

    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value];
        document.getElementById('link_id').href = colorUrlMap[el.value];
    }
</script>
<select name="Color:" onchange="changeSelect(this)">
    <option value="Black/White">Black/White</option>
    <!-- Add more here -->
    <option value="White/Red/Black">White/Red/Black</option>
</select>

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage"> 

example:

<a id="link_id" href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

<script>
    var colorUrlMap = {
        "Black/White" : {
            "src" : "images/taylormade_purelite_standbag_bk.jpg",
            "href" : "your link here"
        },
        //Add more here
        "White/Red/Black" : {
            "src" : "images/taylormade_purelite_standbag_wrb.jpg",
            "href" : "your other link here"
        }
    };

    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
</script>

function changeColor(el) {
    if (el.nodeName != "INPUT" || el.checked) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
}