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'); } });