자바스크립트 드롭다운 상자에서 선택된 값의 인덱스를 아는 방법

JavaScript는 웹 개발에 널리 사용되는 스크립팅 언어입니다. 그중 드롭다운 상자(드롭다운 목록)는 페이지 개발에서 일반적으로 사용되는 컨트롤로, 사용자가 미리 정의된 일련의 옵션에서 값을 선택할 수 있도록 하는 데 사용됩니다. JavaScript에서는 일반적으로 사용자가 선택한 값을 처리해야 하므로 드롭다운 상자에서 선택한 값의 인덱스를 알아야 합니다. 이번 글에서는 자바스크립트에서 드롭다운 박스에서 선택한 값의 인덱스를 구하는 방법을 자세히 소개하겠습니다.

1. 드롭다운 상자의 기본 사용법

드롭다운 상자는 HTML에서 태그로 정의되며 태그는 드롭다운 옵션을 정의합니다. 간단한 드롭다운 상자는 다음과 같이 작성할 수 있습니다.

<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

이 드롭다운 상자에는 4가지 옵션이 있으며 각 옵션의 값과 표시 텍스트는 "volvo", "Volvo", "saab", "Saab"입니다. , "오펠", "오펠", "아우디". 그 중 value 속성은 옵션의 값을 정의합니다. value 속성이 지정되지 않은 경우 기본 옵션 값은 표시되는 텍스트입니다. 드롭다운 상자에서 기본적으로 선택되는 옵션은 첫 번째 옵션인 "Volvo"입니다.

JavaScript에서는 getElementById() 메서드를 통해 드롭다운 상자 요소를 가져올 수 있습니다.

var selectElement = document.getElementById("mySelect");

2. 선택한 옵션의 인덱스를 가져옵니다.

드롭에서 선택한 옵션의 인덱스를 가져오는 방법에는 여러 가지가 있습니다. -down 상자. 이러한 방법은 아래에 소개되어 있습니다.

1. selectedIndex 속성

selectedIndex 속성은 선택한 옵션의 인덱스를 반환합니다. 기본적으로 selectedIndex 속성의 값은 첫 번째 옵션인 0입니다. selectedIndex 속성의 값을 변경하여 선택한 옵션을 변경할 수 있습니다.

드롭다운 상자에서 선택한 옵션의 인덱스를 가져오려면 다음과 같이 작성할 수 있습니다.

var selectElement = document.getElementById("mySelect");
var selectedOptionIndex = selectElement.selectedIndex;

2. value 속성

value 속성은 선택한 옵션의 값을 반환합니다. selectedIndex 속성을 통해 선택한 옵션의 인덱스를 가져온 다음 해당 옵션의 값을 가져올 수 있습니다.

드롭다운 상자에서 선택한 옵션의 값과 인덱스를 얻으려면 다음과 같이 작성할 수 있습니다.

var selectElement = document.getElementById("mySelect");
var selectedOptionIndex = selectElement.selectedIndex;
var selectedOptionValue = selectElement.options[selectedOptionIndex].value;

3. options collection

options 컬렉션에는 모든

옵션 컬렉션 옵션을 통해 특정 옵션을 가져온 다음 옵션의 인덱스와 값을 가져옵니다.

드롭다운 상자에 있는 모든 옵션의 값과 인덱스를 얻고 싶다고 가정하면 다음과 같이 작성할 수 있습니다.

var selectElement = document.getElementById("mySelect");
for(var i = 0; i < selectElement.options.length; i++) {
  var optionValue = selectElement.options[i].value;
  var optionIndex = i;
}

4. 요약

JavaScript에는 옵션의 인덱스를 얻는 여러 가지 방법이 있습니다. selectedIndex 속성, 값 속성 및 옵션 컬렉션 사용을 포함하여 드롭다운 상자에서 선택한 값. 그 중 selectedIndex 속성은 선택한 옵션의 인덱스를 반환하고, value 속성은 선택한 옵션의 값을 반환하며, options 컬렉션에는 모든 옵션에 대한 정보가 포함되어 있습니다. 다양한 방법은 다양한 유형의 애플리케이션 시나리오에 적합하며 실제 상황에 따라 기능을 구현하는 데 적합한 방법을 선택할 수 있습니다.

위 내용은 자바스크립트 드롭다운 상자에서 선택된 값의 인덱스를 아는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：JavaScript를 사용하여 등록 정보를 확인하는 방법에 대해 토론다음 기사：JavaScript를 사용하여 등록 정보를 확인하는 방법에 대해 토론

관련 기사

더보기

• Vue의 상위 구성 요소에서 하위 구성 요소 차트로 값을 전달하는 데 문제가 있습니다.
• React 이 바인딩에 대한 몇 가지 생각
• Django는 요청을 사용하여 브라우저에서 보낸 매개변수를 가져옵니다.
• JQuery의 DOM 작업 - 랩
• 프로토타입 및 프로토타입 체인 관련 내용 설명

• 집

• 강의

• Q&A

• 나의

• 집
• 강의
• 기사
• Q&A
• 사전
• 수동
• 다운로드
• 주제

집

기사

Q&A

강의

주제

다운로드

게임

사전

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）