[자바스크립트] innerHtml, switch case을 이용해 selectbox 선택하면 이미지 출력

- SCRIPT

function selectColor(obj) {
    f = document.forms.selectForm;
   
    if(obj == 'yellow') {
        f.num1.style.display = "";
        f.num2.style.display = "none";
        f.num3.style.display = "none";
    } else if(obj == 'blue') {
        f.num1.style.display = "none";
        f.num2.style.display = "";
        f.num3.style.display = "none";
    } else if(obj == 'red') {
        f.num1.style.display = "none";
        f.num2.style.display = "none";
        f.num3.style.display = "";
    }
}

function selectSub(obj){
    // var color1 = obj.substring(0,1);
    // var things = obj.substring(1,3);
    // alert(obj);
    // var n1 = document.getElementById("num1");
    // var things =
    var s = document.getElementById("result");
   
    // alert("obj : " + obj + "1 : " + n1 + " / 2 : " + s );
   
    //obj.addEventListener("change", function(e) {
    // alert("색상 : " + color1 + " / 사물 : " + things );
    // s.innerHTML = obj;
    // document.getElementById("result").innerHTML = ;
    // document.getElementById("result").innerHTML = ;
    //},false);

    switch(obj){
        case 'y01': s.innerHTML = "<img src='http://hometowncolumbia.files.wordpress.com/2010/03/banana1.jpg' width='50%' highth='50%'/>"; break;
        case 'y02': s.innerHTML = "<img src='https://t1.daumcdn.net/cfile/tistory/1150DA4E4FBC35E01F' width='50%' highth='50%'/>"; break;
        case 'y03': s.innerHTML = "나비"; break;
        case 'b01': s.innerHTML = "파랑1"; break;
        case 'b02': s.innerHTML = "파랑2"; break;
        case 'b03': s.innerHTML = "파랑3"; break;
        case 'r01': s.innerHTML = "사과"; break;
        case 'r02': s.innerHTML = "딸기"; break;
        case 'r03': s.innerHTML = "토마토"; break;
        default: s.innerHTML = ""; break;
   }
}

 

 

- HTML
<form name="selectForm" id="selectForm">
    색상 : <select name="classNum" onChange="selectColor(this.options[this.selectedIndex].value);">
        <option value="">선 택</option>
        <option value="yellow">노랑</option>
        <option value="blue">파랑</option>
        <option value="red">빨강</option>
    </select>
    </p>
    사물 :
    <select name="num1" id="num1" style="display:none ;" onChange="selectSub(this.options[this.selectedIndex].value);">
        <option value="">노랑 선택</option>
        <option value="y01">바나나</option>
        <option value="y02">병아리</option>
        <option value="y03">나비</option>
    </select>
    <select name="num2" style="display:none ;" onChange="selectSub(this.options[this.selectedIndex].value);">
        <option value="">파랑 선택</option>
        <option value="b01">파랑1</option>
        <option value="b02">파랑2</option>
        <option value="b03">파랑3</option>
    </select>
    <select name="num3" style="display:none ;" onChange="selectSub(this.options[this.selectedIndex].value);">
        <option value="">빨강 선택</option>
        <option value="r01">사과</option>
        <option value="r02">딸기</option>
        <option value="r03">토마토</option>
    </select>
    </p>
    <div id="result"></div>
</form>

 

 

 

실행 : http://jsfiddle.net/y0yv68cw/7/