사용자 도구

사이트 도구


wiki:javascript:jquery:jquery_note:jquery_change_method

jQuery change() Method

  • description : jQuery change() Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2023-01-27 Fri


jQuery change() Method

Definition and Usage

change 이벤트는 어떤 요소의 값이 변경되었을 때 발생합니다.(<input>, <textarea>, <select> 요소에서만 동작)

change() 메소드는 change 이벤트를 작동시키거나, change 이벤트가 발생할 때 실행할 함수를 연결합니다.

Note: select 메뉴의 경우, option을 선택하면 change이벤트가 발생합니다. 텍스트 필드 또는 텍스트 영역의 경우,
콘텐츠가 변경된 후 해당 필드가 focus를 잃을 때 change 이벤트가 발생합니다.

// '동영상 강의 등록' 모달에서 계정 선택 시, 계정 표시 우측에 계정을 상징하는 대문자로 뱃지 표시하기 
$(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');
	}
});
/var/services/web/dokuwiki/data/pages/wiki/javascript/jquery/jquery_note/jquery_change_method.txt · 마지막으로 수정됨: 2023/01/27 12:44 저자 emblim98