選擇框onchange更新多個項目

Question

我想要一個選擇框來使用onchange函數來更新它周圍的多個項目。這是我到目前爲止的代碼：

function picture() { 
var imglink; 
var imgprice; 
var picture_type = document.getElementById('picture_type').value; 
if ("picture_type" == "1") { 
    imglink = "img1.png"; 
    imgprice = "$xx.xx"; 
} 
if("picture_type" == "2") { 
    imglink = "img2.png"; 
    imgprice = "$xxx.xx"; 
} 
else { 
    document.getElementById('iphoneprice').style.display = 'none'; 
} 
document.getElementById('phoneimg').src = imglink; 
document.getElementById('iphoneprice').innerHTML = imgprice; 
} 

和匹配HTML：

<select id="picture_type" onchange="picture()"> 
<option value="1">iPhone 4</option> 
<option value="2">iPhone 4S</option> 
</select> 
<p id="iphoneprice"></p> 
<img id="iphoneimg" src="" /> 

我怎麼能使其成功地同時更新這兩個變量？

Answer 1

你有一個錯字（getElementById('phoneimg')應該是getElementById('iphoneimg')）和變量名稱周圍的引號。這應該工作：

function picture() { 
    var imglink; 
    var imgprice; 
    var picture_type = document.getElementById('picture_type').value; 
    if (picture_type == "1") { 
     imglink = "img1.png"; 
     imgprice = "$xx.xx"; 
    } 
    else if(picture_type == "2") { 
     imglink = "img2.png"; 
     imgprice = "$xxx.xx"; 
    } else { 
     document.getElementById('iphoneprice').style.display = 'none'; 
    } 
    document.getElementById('iphoneimg').src = imglink; 
    document.getElementById('iphoneprice').innerHTML = imgprice; 
} 

jsFiddle example