菜单下拉列表的Javascript开关语句

我正在用javascript编写一个菜单下拉列表的switch语句，到目前为止，我有以下代码（脚本在头部，其余在身体，map_img1等是一个url）：

功能选择交通摄像头（inobj）{
开关（inobj）{
案例“0”：
document.getElementById（“trafficcams”）.innerHTML=“
选择地图”
打破
案例“1”：
document.getElementById（“trafficcams”）.innerHTML=“”
打破
案例“2”：
document.getElementById（“trafficcams”）.innerHTML=“”
打破
案例“3”：
document.getElementById（“trafficcams”）.innerHTML=“”
打破
案例“4”：
document.getElementById（“trafficcams”）.innerHTML=“”
打破
}
}
选择交通摄像头
布里斯班
罗什代尔
洛根市
奈蕴

基本上我想说的是，当在菜单下拉菜单中选择不同的选项时，更改div标签中的图像，不幸的是，这对我不起作用，我不确定为什么不起作用。我还尝试在div中创建一个带有空白src的img标记，而不是使用innerHTML，我会使用.src，这也不起作用。我能了解一下这方面的情况吗

提前谢谢

---

**为了澄清，map\u img1等实际上是url（imagename）格式的url。jpg

您对新的

和
标记的引用被弄乱了

改变这些：

并使用此JS：

<div id="trafficcams" align="middle" width="400" height="400">
    <p id="display2"><big><b>Choose a map</b></big></p>
    <img id="displayImg" src="" style="display:none;" />
</div>

演示：
如上所述，您需要转义img标记和Selected A map消息中的字符串

另外，您实际上不需要switch语句，您可以使用以下命令简化代码

function selectTrafficCamera(inobj) {
    if (inobj === "0") {
        document.getElementById("display2").style.display = "block";
        document.getElementById("displayImg").style.display = "none";
    } else {
        document.getElementById("display2").style.display = "none";
        var img = document.getElementById("displayImg");
        img.src = "map_img" + inobj;
        img.style.display = "inline";
    }
}

选择地图

选择交通摄像头
布里斯班
罗什代尔
洛根市
奈蕴
document.getElementById（'trafficCamSelect'）。addEventListener（'change'，function（evt）{
var imgName=this.value，
el=document.getElementById（“trafficcams”）；
如果（imgName==“0”）{
el.innerHTML='
选择一个地图；
}否则{
el.innerHTML=''；
}
});

通过将图像名称移动到选项的值中，您可以使JS更简单，更易于阅读/维护。
只是尝试更改引号，但没有成功：/所有URL也以.jpg结尾。@user2279496是否要省略文件扩展名？图像和HTML文件在同一个目录下吗？只是为了澄清一下，因为我没有把url放在问题中，它是这样的：url（imagename）。jpgWell我交换了代码，把HTML放在那里，并像你那样更改它，它工作了！仍然不确定为什么switch语句对我不起作用，但是非常感谢（：@user2279496嗯，我真的不确定。你能检查一下浏览器的控制台，看看是否抛出了任何错误吗？我很高兴至少另一个选项起了作用。这是我一开始应该做的——隐藏/显示
innerHTML
= "<p id='display2'><big><b>Choose a map</b></big></p>"
// and
= "<img src='map_img3' />"
// and the rest

<div id="trafficcams" align="middle" width="400" height="400">
    <p id="display2"><big><b>Choose a map</b></big></p>
    <img id="displayImg" src="" style="display:none;" />
</div>

function selectTrafficCamera(inobj) {
    if (inobj === "0") {
        document.getElementById("display2").style.display = "block";
        document.getElementById("displayImg").style.display = "none";
    } else {
        document.getElementById("display2").style.display = "none";
        var img = document.getElementById("displayImg");
        img.src = "map_img" + inobj;
        img.style.display = "inline";
    }
}

<div id="trafficcams" align="middle" style="width:400px;height:100px"><p id="display2"><big><b>Choose a map</b></big></p></div>
<div id="menulist" align="middle">
    <select id="trafficCamSelect">
        <option value="0" selected="selected">Select Traffic Cam</option>
        <option value="map_img1">Brisbane City</option>
        <option value="map_img2">Rochedale</option>
        <option value="map_img3">Logan City</option>
        <option value="map_img4">Nerang</option>
    </select>
</div>
<script>
document.getElementById('trafficCamSelect').addEventListener('change', function (evt) {
    var imgName = this.value,
        el = document.getElementById("trafficcams");

    if (imgName === "0") {

        el.innerHTML = '<p id="display2"><big><b>Choose a map</b></big></p>';
    } else {

        el.innerHTML = '<img src="' + imgName + '" />';
    }
});
</script>