셀렉트박스 값 변경시 해당 웹사이트 방문하기
2007/10/31 18:18
<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값에 방문할 사이트 주소를 입력합니다.
IE를 제외한 브라우저에서는 value속성값이 없을 경우 option 의 텍스트를 value값으로 인식합니다.
위와 같은 이유로 onchange에 this.value를 인자로 던지는 종류의 스크립트를 배제합니다.
위의 스크립트는 select라는 UI컴포넌트를 사용하여 좀더 적은 공간에 효율적으로
링크 이동을 하기 위함입니다. 원칙적으로
<form></form>에 select를 구현하고 submit 버튼도 함께 구현하여 자바스크립트가 정상적으로 지원되지 않는 환경을 고려하셔야 합니다.
