JavaScript 변경 선택 옵션

오늘 포스트에서는 자바스크립트 Select 요소의 선택된 옵션을 변경하는 방법을 알아보겠습니다.

JavaScript에서 선택한 옵션 변경

JavaScript는 원하는 선택기 또는 선택기 세트에 맞는 문서 내부의 기본 요소를 반환하는 내장 Document querySelector() 메서드를 제공합니다. 일치하는 항목이 없으면 Null이 반환됩니다.

통사론:

querySelector(selectors)

selectors는 필수 매개변수인 문자열입니다. 이 문자열에는 일치해야 하는 하나 이상의 선택기가 포함되어 있습니다.

이 문자열은 유효한 CSS 선택기 문자열이어야 합니다. 그렇지 않은 경우 SyntaxError 예외가 발생합니다. 선택기 및 선택기를 관리하는 방법에 대한 자세한 내용은 .querySelector()를 참조하세요.

이 JavaScript 메소드는 지정된 CSS 선택기 세트와 일치하는 문서의 첫 번째 요소를 나타내는 Element 객체를 반환하거나 일치하는 항목이 없으면 null을 반환합니다.

예를 들어 이해합시다.

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

const selectedValue = 'goa';
document.querySelector('#city [value="' + selectedValue + '"]').selected = true;

위의 예는 선호하는 위치를 선택하기 위한 select 드롭다운을 정의했습니다. 기본 선호 위치가 뭄바이라고 가정합니다.

querySelector() 메소드를 통해 선택된 값을 true로 설정하고 기본 위치를 goa로 선택할 수 있습니다. 선택한 속성은 부울 값을 허용합니다.

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

출력:

데모