셀렉트박스 값 변경시 해당 웹사이트 방문하기

<script type="text/javascript">
function visit(select){
        var url = select.options[select.selectedIndex].getAttribute('value');
        if(url) location.href = url;
}
</script>

<select onchange="visit(this)">
    <option value="http://daum.net">다음</option>
    <option value="http://naver.com">네이버</option>
    <option>이동없음</option>
</select>

사용법은 간단합니다.

select에 onchange 이벤트에 visit(this) 걸어주시고요.

option의 value값에 방문할 사이트 주소를 입력합니다.

그냥 이동이 없는 option 의 경우에는 value="" 이렇게 값이 없는 value 속성을 추가해야합니다.

IE를 제외한 브라우저에서는 value속성값이 없을 경우 option 의 텍스트를 value값으로 인식합니다.

위와 같은 이유로 onchange에 this.value를 인자로 던지는 종류의 스크립트를 배제합니다.



위의 스크립트는 select라는 UI컴포넌트를 사용하여 좀더 적은 공간에 효율적으로

링크 이동을 하기 위함입니다. 원칙적으로

<form></form>에 select를 구현하고 submit 버튼도 함께 구현하여 자바스크립트가 정상적으로 지원되지 않는 환경을 고려하셔야 합니다.