[JavaScript] onChange(SELECT,OPTION 태그){ innerHtml, ClassName}

onChange(onClick) select/option 태그에 적용하기{

<SELECT onChange="javascript:change(this.value);">
<OPTION value='1'>선택1</OPTION>
<OPTION value='2'>선택2</OPTION>
 </SELECT>

};

 

• this.value를 활용하면 option의 value를 가져올수있다.

onChange(onClick) 을 활용해서 각종 변경 해보기(checked,disabled,className,innerHTML){

function change(cd)
{
    var div = document.getElementsByName("sel_div"); // 전역변수로 받아서 사용하기
    if( cd == "1" ){      
        div[0].disabled =  true;    
       div[1].disabled =  false;    
        document.getElementsByName("sel_div")[0].disabled = true;  // 지역적으로 받아서 사용하기
        document.getElementsByName("sel_div")[0].disabled = true; 
        // 태그 Class 변경
        document.getElementsByName("sel_div")[0].className = "input_combobox";  
        // Html 태그 안에 글자 변경하기
        document.getElementById('Change_Html').innerHTML="변경했다"; // 지역적으로 받아서 사용하기
 
    }else if( cd == "2"){
        div[0].checked  =  true;    
       div[0].disabled =  false;
        document.getElementsByName("sel_div")[0].disabled = false;  
        document.getElementsByName("sel_div")[0].disabled = false; 
        // 태그 Class 변경
        document.getElementsByName("sel_div")[0].className = "input";  
        // Html 태그 안에 글자 변경하기
        document.getElementById('Change_Html').innerHTML="변경안했다"; // 지역적으로 받아서 사용하기    
    }     
}

};

 

• getElementsByName 은 배열값으로 받아지며 사용할 값을 배열로 뽑아야 한다.

• getElementById 은 value값으로 받아진다.

• .checked .disabled 등을 활용할때는 ture/false 값으로 부여한다.