0

我正在为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 的 url

4

2 回答 2

0

<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

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

演示：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";
    }
}

演示：http: //jsfiddle.net/gbdV2/2/

于 2013-05-18T15:00:13.997 回答
0

如上所述，您需要对 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 更简单、更易于阅读/维护。

于 2013-05-18T15:34:57.473 回答