====== jQuery change() Method ======
<WRAP left notice 70%>
  * description : jQuery change() Method
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2023-01-27 Fri
</WRAP>
<WRAP clear></WRAP>
\\

===== jQuery change() Method =====

==== Definition and Usage ====
change 이벤트는 어떤 요소의 값이 변경되었을 때 발생합니다.(%%<input>%%, %%<textarea>%%, %%<select>%% 요소에서만 동작)\\
\\
change() 메소드는 change 이벤트를 작동시키거나, change 이벤트가 발생할 때 실행할 함수를 연결합니다.\\
\\
**Note: ** select 메뉴의 경우, option을 선택하면 change이벤트가 발생합니다. 텍스트 필드 또는 텍스트 영역의 경우,\\
콘텐츠가 변경된 후 해당 필드가 focus를 잃을 때 change 이벤트가 발생합니다.\\
 
<code javascript>
// '동영상 강의 등록' 모달에서 계정 선택 시, 계정 표시 우측에 계정을 상징하는 대문자로 뱃지 표시하기 
$(document).on('change', 'form#lectureRegForm select#accountNm', function(){
	//alert('alarm text when option clicked ');
	
	// 선택한 option의 value에 지정된 값을 변수에 대립
	//let selectedAccountVal = $('form#lectureRegForm').find('option:not(:first):selected').val();
	let selectedAccountVal = $('form#lectureRegForm').find('option:selected').val();
	
	// 선택한 option의 value의 값에서 첫 번째 문자만 추출하고, 대문자로 변화하여 변수에 대입
	let firstChar = selectedAccountVal.substring(0,1).toUpperCase();

	$(this).siblings('input#displayAccountNm').val('');
	$(this).siblings('input#displayAccountNm').val(selectedAccountVal);
	//$(this).siblings('span.badge').remove();
		
	console.log(firstChar);
	
	if (firstChar === 'S') 
	{
		$(this).siblings('span.badge').removeClass('badge-customIndigo badge-customOrange badge-customTeal');
		$(this).siblings('input#displayAccountNm').val('');		
		$(this).siblings('span.badge').text('');
	
	}
	 else if (firstChar === 'R')
	{
		$(this).siblings('span.badge').removeClass('badge-customOrange badge-customTeal');
		$(this).siblings('span.badge').addClass('badge-customIndigo');
		$(this).siblings('span.badge').text('R');

	} 
	else if (firstChar === 'D')
	{
		$(this).siblings('span.badge').removeClass('badge-customIndigo badge-customTeal');
		$(this).siblings('span.badge').addClass('badge-customOrange');
		$(this).siblings('span.badge').text('D');
	}
	else if (firstChar === 'E')
	{
		$(this).siblings('span.badge').removeClass('badge-customIndigo badge-customOrange');
		$(this).siblings('span.badge').addClass('badge-customTeal');
		$(this).siblings('span.badge').text('E');
	}
});
</code>


==== Ref Link ====
[[https://www.w3schools.com/jquery/event_change.asp|jQuery change() Method]]\\
[[https://api.jquery.com/change/#change-handler|.change()]]\\






{{tag>오션 change()_method change()}}