Question

为什么谷歌浏览器不能用js切换图片

</div>

<div class="color">
<h2 class="h">CHOOSE A CORLOR</h2>
<select class="price" onchange="color">
<option value="red" onclick="red()">Red</option>
<option value="blue" onclick="blue()">Blue</option>
<option value="black" onclick="black()">Black</option>
</select>
<img id="img" src="1.jpg" width="350" height="90"/>
</div>

<script type="text/javascript">

function red() {
var v = document.getElementById("img");
v.src="1.jpg"
}
function blue() {
var v = document.getElementById("img");
v.src="2.jpg"
}
function black() {
var v = document.getElementById("img");
v.src = "3.jpg"
}
</script>
运行上面代码，图片不改变，火狐和ie都能改变

Answer 1

下面为手写代码，我不能保证正确性，
基本判断，chrome浏览器可能不对option上的事件做识别
先去掉你上面的三个函数，以及option上的onclick事件
下面为改动及增加函数
<select class="price" onchange="color(this)">

function color(this){
var v = document.getElementById("img");

switch(this.value){
case "red":
v.src="1.jpg";
break;
case "blue":
v.src="2.jpg";
break;
case "black":
v.src="3.jpg";
break;
default:
v.src="1.jpg";
break;
}

}

追问

这段代码没有语法错误，但是在任何浏览器上都没有效果