[jsavascript] 옵션 선택 시 선택한 옵션 이미지로 변경

 

html

	<form action="">
        <select name="" id="changeImg">
            <option value="./img/ban01.jpg">물감</option>
            <option value="./img/ban02.jpg">달</option>
            <option value="./img/ban03.jpg">밤</option>
        </select>
    </form>
    <img id="myImg" src="./img/ban01.jpg" alt="옵션 그림">

 

 

script

    <script>
        let changeimg = document.getElementById("changeImg");
        let myImg = document.getElementById("myImg");

        function changeImage(){
            let index = changeimg.selectedIndex;
            myImg.src = changeimg.options[index].value;
        }
        
        changeImage();
        changeimg.onchange = changeImage;

    </script>

 

selectedindex - 선택되어 있는 option의 인덱스를 가져오거나 설정

 

changeimg가 바뀔때마다(onchange)

changeImage 함수 실행

 

 

결과