HTML select option(select box)에서 값 가져오기

위 사진처럼 select option value(셀렉트박스)를 이용해서 선택한 값을 텍스트박스에 불러오는 재미있는 일을 해보겠다.

가끔 회원가입하면서 이메일 입력할때 바로 옆에 홈페이지 입력란에 많은 홈페이지를 선택할 수 있는것을 보았을것이다.

이를 한번 해보겠다. 

코딩을 준비해보았다.

<script>
    function setValues() {
        var sh = document.getElementById("selectHours");
        var tt = document.getElementById("textTime");
        tt.value = sh.options[sh.selectedIndex].text;
    }
</script>
<select id="selectHours" size="1" onchange="setValues();">
    <option value="1">테스트 1</option>
    <option value="2">테스트 2</option>
</select>
<input type="text" id="textTime">