jQuery에서 Select OnChange의 값 가져오기

오늘의 게시물은 jQuery에서 select의 변경된 값을 가져오는 방법에 대해 설명합니다.

jQuery의 OnChange

jQuery는 이벤트 핸들러를 JavaScript 변경 이벤트에 바인딩하거나 요소에서 해당 이벤트를 발생시키는 change 메서드를 제공합니다.

통사론:

.change(handler)

handler는 change 이벤트가 발생할 때 실행해야 하는 기능입니다. change 이벤트는 요소의 값이 변경되자마자 요소로 전송됩니다.

이 이벤트는 입력 요소, 텍스트 상자 필드 및 선택 요소로 제한됩니다.

확인란 및 라디오 버튼의 경우 사용자가 마우스를 선택하면 이벤트가 즉시 발생하지만 다른 요소 유형의 경우 이벤트는 요소가 포커스를 잃을 때까지 지연됩니다. 이 문서에서 onchange에 대한 자세한 정보를 찾을 수 있습니다.

다음 예를 통해 이해해 봅시다.

<select>
  <option value="mumbai">Mumbai</option>
  <option value="goa">Goa</option>
</select>

$('select').on('change', function() {
  console.log(this.value);
});

위의 예에서 2개의 선택 옵션을 정의했습니다. 이벤트 핸들러는 선택 상자에 바인딩될 수 있습니다.

사용자가 옵션을 선택하면 jQuery가 해당 변경 사항을 감지하고 change 기능이 실행됩니다.

이벤트가 발생한 후 선택한 값을 반환합니다. jQuery를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행하면 아래 결과가 표시됩니다.

출력:

"goa"
"mumbai"

데모