html select문 선택시 자바스크립트 실행하는 방법, 초간단한 예제로 설명

안녕하세요. 자바스크립트와 웹을 연구하는 사람들.....

select문에서 뭔가를 선택했을때? 다른 동작을 하고 싶다?라는 질문이 있다면 

아래의 문장에 답이 있습니다.

 

<div>
    <form name='selectForm'>
        <select name='selectName'>
            <option value='0000'>선택하기</option>
            <option value='1111'>1번</option>
            <option value='2222'>2번</option>
            <option value='3333'>3번</option>
            <option value='4444'>4번</option>
        </select>
    </form>
</div>

<script>
    // 브라우저 호환(크로스브라우징)을 체크한후 페이지 로딩후 selectEvent() 함수를 실행 합니다.
    if ( window.addEventListener ) {
        window.addEventListener("load",selectEvent,false);
    } else if ( window.attachEvent ) {
        window.attachEvent("onload",selectEvent);
    } else {
        window.onload = selectEvent;
    }
    function selectEvent() {
        // 폼이름,셀렉트박스이름 으로 셀렉트박스에 접근합니다.
        // onchange 이벤트를 적용해줍니다. 
        document.selectForm.selectName.onchange = selectFun;
    }
    // this.value 로 이벤트가 발생한 곳,자신(this)의 value값을 출력 합니다.
    function selectFun() {
        // value 가 '0000'인 선택하기를 클릭했을때는 얼럿이 뜨지 않도록 예외처리를 해줍니다.
        if ( this.value == '0000' ) {
            return false;
        }
        alert( this.value );
    }    
</script>

위의 select문과 자바스크립문장을 서로 함께 콜라보해서 사용하면,

멋진 연결 프로그램이 완성됩니다.  도전해 보세요~

select문과 자바스크립트의 조합은 위의 자료가 정말 도움이 될 것 같습니다.