[자바스크립트 / js ] 부트스트랩 모달 내용 초기화 / 모달 인풋 초기화 / 모달 셀렉트 초기화 / Bootstrap Modal Reset

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 제이쿼리나 자바스크립트로 작업할 때 자주 사용되는

부트스트랩 모달 초기화 방법에 대해 공유하겠습니다.

 

예를 들어,

모달 input에 내용을 입력하고 모달을 종료했다가 (혹은 셀렉트 박스에서 옵션을 선택하고 종료했다가)

모달을 다시 열었을 때 입력한 내용이 그대로 보이면 이 포스팅을 참고하여 해결하시기 바랍니다.

 

지금부터 가독성을 위해 문어체를 사용하여 작성할게요.

 

 

  모달 초기화

• 부트스트랩으로 작업 시 사용하면 된다.
• 모달 종료 후에 다시 모달을 열었을 때, 데이터가 남아 있을 때 사용하면 된다.
• 아래 코드를 공통적으로 사용하는 js 파일에 입력해주기.

// ______________모달 종료 시 입력값 초기화
$('.modal').on('hidden.bs.modal', function(e) {
    console.log('modal close');

    // 텍스트 인풋 초기화
    if($(this).find('form').length >0){
    	$(this).find('form')[0].reset();
   		var inputValue = $(this).find('select:eq(0) option:eq(0)');
    }

    // 셀렉트 초기화
    $('.select2').val(0).trigger('change.select2');

    console.log('모달 초기화', inputValue)
});