Question

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

<script>
    function selectTrafficCamera(inobj) {
        switch(inobj) {
            case "0":
                document.getElementById("trafficcams").innerHTML = "<p id="display2"><big><b>Choose a map</b></big></p>"
                break;
            case "1":
                document.getElementById("trafficcams").innerHTML = "<img src="map_img1"/>"
                break;
            case "2":
                document.getElementById("trafficcams").innerHTML = "<img src="map_img2"/>"
                break;
            case "3":
                document.getElementById("trafficcams").innerHTML = "<img src="map_img3"/>"
                break;
            case "4":
                document.getElementById("trafficcams").innerHTML = "<img src="map_img4"/>"
                break;
            }
    }
</script>

<div id="trafficcams" align="middle" width="400" height="400">
</div>

<div id="menulist" align="middle">
    <select onchange="selectTrafficCamera(this.value);">
        <option value="0" selected="selected">Select Traffic Cam</option>
        <option value="1">Brisbane City</option>
        <option value="2">Rochedale</option>
        <option value="3">Logan City</option>
        <option value="4">Nerang</option>
    </select>
</div>

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

提前致谢。

**只是为了澄清，map_img1等实际上是url（imagename）.jpg格式的网址

Answer 1

您的报价混淆了新的<p>和<img>代码。

更改这些：

= "<p id="display2"><big><b>Choose a map</b></big></p>"
// and
= "<img src="map_img3"/>"
// and the rest

到这些：

= "<p id='display2'><big><b>Choose a map</b></big></p>"
// and
= "<img src='map_img3' />"
// and the rest

否则，一切看起来都很好。

DEMO： http://jsfiddle.net/bEvLS/

同时确保图像具有正确的来源 - 通常，图像文件具有扩展名（.png，.gif，.jpg等。并确保它们与此HTML文件位于同一目录中，因为这是您所说的不提供路径，只是使用文件名。

另一个选择是让HTML实际存在，然后隐藏/显示和更改src。像这样：

<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>

使用这个JS：

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";
    }
}

DEMO： http://jsfiddle.net/gbdV2/2/

Answer 2

如上所述，您需要在img标记和选择的地图消息中转义字符串。

此外，您实际上并不需要switch语句，您可以使用以下内容简化代码...

<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>

通过将图像名称移动到选项的值中，可以使JS更简单，更易于阅读/维护。

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

2 个答案: