jQuery에서 선택한 옵션 설정

오늘 포스팅은 jQuery에서 select의 기본값 설정에 대해 알려드리겠습니다.

jQuery에서 선택한 옵션 설정

이 방법은 일반적으로 양식 필드 값을 설정하는 데 사용됩니다. 일치하는 항목 집합에서 각 항목의 값을 설정합니다.

선택/선택된 것으로 지정할 일치하는 각 항목의 값에 해당하는 텍스트 문자열, 숫자 또는 문자열 배열입니다. val()을 사용하면 사용자가 요소 값의 배열을 전달할 수 있습니다.

<select> 내에 <input type="checkbox">, <input type="radio"> 및 <option>과 같은 요소를 포함하는 jQuery 개체에서 작업할 때 유용합니다.

이 경우 배열 요소 중 하나와 일치하는 값을 가진 항목 및 옵션이 선택되거나 선택되는 반면 값이 배열 요소와 일치하지 않는 항목 및 옵션은 선택되거나 선택 취소됩니다.

라디오 그룹의 일부인 <input type="radio"> 및 <select>의 경우 이전에 선택한 항목이 선택 취소됩니다. 이 방법으로 값을 설정해도 변경 이벤트가 발생하지 않습니다.

이러한 이유로 해당 이벤트 핸들러는 실행되지 않습니다. 실행하려면 값을 설정한 후 call.trigger("change")해야 합니다.

.val() 메서드를 사용하면 함수를 전달하여 값을 설정할 수 있습니다. jQuery 1.4부터는 현재 요소의 인덱스와 현재 값이라는 두 개의 인수가 함수에 전달됩니다.

이 문서에서 자세한 정보를 찾을 수 있습니다.

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

<select id="city">
  <option value="mumbai">Mumbai</option>
  <option value="goa">Goa</option>
  <option value="delhi">Delhi</option>
</select>

$(function() {
  $('#city').val('goa');
});

위의 예에서 select를 사용하여 city 드롭다운을 정의했습니다. 도시 드롭다운의 기본값은 goa입니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행하십시오. 아래 결과가 표시됩니다.

출력: