Select Box onchange Update Multiple Items

Select Box onchange Update Multiple Items

本文关键字：Multiple Items Update onchange Box Select      更新时间：2023-09-26

我正在尝试获取一个选择框来使用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="" />

我如何使它同时成功地更新这两个变量？

您有一个拼写错误（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示例

相关文章：