메뉴 드롭 목록에 대한 자바 스크립트 스위치 문

Question

javascript의 메뉴 드롭 목록에 대한 switch 문을 수행하고 있으며 다음 코드를 포함하고 있습니다 (스크립트는 머리에 있고 나머지는 본문에 있습니다. 기본적으로

<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 태그에 이미지를 변경 메뉴에서 선택했을 때 말하려고 해요 : map_img1는 등의 URL)입니다 저와 나는 그것이 왜 불확실한 지 알 수 없습니다. div 안에 빈 src가있는 img 태그를 만들려고했는데 innerHTML을 사용하는 대신 작동하지 않는 .src를 사용했습니다. 나는 이것에 대해 약간의 통찰력을 얻을 수있을 것인가?

미리 감사드립니다. 단지 등 설명의 map_img1에 대한

** 실제로 새로운 <p> 및 <img> 태그 엉망

Answer 1

당신의 따옴표를 .JPG 형식의 URL (참고 ImageName)의 URL입니다.

변경이 : 다음에

= "<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 : 위에서 언급 한 바와 같이, 당신은 IMG 태그의 문자열을 이스케이프 할 필요가http://jsfiddle.net/gbdV2/2/

Answer 2

몇 가지,이처럼 에서지도 메시지를 선택했습니다. 또한

, 당신이 정말로 옵션의 값에 이미지 이름을 이동하여 ... 당신은 다음과 같이 코드를 단순화 할 수 있습니다,

<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을 읽기/유지가 더 쉽고 간단합니다.