JavaScript를 사용하여 드롭다운 목록에서 선택한 값 가져오기

자바스크립트를 사용하여 드롭다운 목록에서 선택한 값을 어떻게 가져올 수 있을까요?

<form>
  <select id=ddlViewBy>
    <option value=1>테스트1</option>
    <option value=2 selected=selected>테스트2</option>
    <option value=3>테스트3</option>
  </select>
</form>

답변 1

다음과 같이 보이는 select 요소가 주어진다:

<select id=ddlViewBy>
  <option value=1>테스트1</option>
  <option value=2 selected=selected>테스트2</option>
  <option value=3>테스트3</option>
</select>

다음 코드를 실행:

var e = document.getElementById(ddlViewBy);
var value = e.value;
var text = e.options[e.selectedIndex].text;

결과는 다음과 같다:

value == 2
text == 테스트2

대화형 예시:

var e = document.getElementById(ddlViewBy);
function onChange() {
  var value = e.value;
  var text = e.options[e.selectedIndex].text;
  console.log(value, text);
}
e.onchange = onChange;
onChange();

<form>
  <select id=ddlViewBy>
    <option value=1>test1</option>
    <option value=2 selected=selected>test2</option>
    <option value=3>test3</option>
  </select>
</form>

답변 2

JavaScript를 사용하여 드롭다운 목록에서 선택한 값 가져오기
JavaScript는 많은 웹 개발자들이 웹 페이지에 상호작용성을 부여하기 위해 사용하는 강력한 프로그래밍 언어입니다. 드롭다운 목록은 사용자가 선택할 수 있는 여러 옵션을 포함하는 HTML 요소입니다. 사용자가 목록에서 항목을 선택하면 JavaScript를 사용하여 선택한 값을 가져올 수 있습니다.
먼저, JavaScript에서 드롭다운 목록을 선택하기 위해 문서 객체 모델(DOM)을 사용합니다. DOM은 웹 페이지의 구조를 나타내는 트리 형식의 객체 계층 구조입니다. 드롭다운 목록은 select 요소로 표현되며, 이 요소에는 여러 option 요소가 포함됩니다. JavaScript를 사용하여 드롭다운 목록을 선택하려면 getElementById 또는 querySelector와 같은 DOM 메서드를 사용합니다. 이 메서드를 사용하여 목록의 ID 또는 선택자를 인수로 전달하면 해당 목록을 가져올 수 있습니다.
다음으로, 선택한 값에 액세스하려면 JavaScript를 사용하여 목록의 selectedIndex 속성을 사용합니다. selectedIndex는 목록에서 선택한 옵션의 인덱스를 나타내는 속성입니다. 사용자가 첫 번째 옵션을 선택했다면 selectedIndex는 0이 될 것입니다. 따라서 JavaScript를 사용하여 selectedIndex를 참조하면 선택한 값의 인덱스를 얻을 수 있습니다.
그러나 우리는 선택한 값을 보여주고 싶기 때문에, selectedIndex 값만으로는 충분하지 않습니다. 대신, JavaScript를 사용하여 목록의 options 속성을 참조하여 선택한 값을 얻을 수 있습니다. 이 속성은 목록의 옵션 요소를 나타내는 HTMLOptionsCollection 객체를 반환합니다. 선택한 값은 options[selectedIndex].value와 같이 options 속성에 selectedIndex 값을 적용하여 얻을 수 있습니다. 이렇게하면 선택한 값의 value 속성의 값을 얻을 수 있습니다.
JavaScript를 사용하여 드롭다운 목록에서 선택한 값을 가져오는 방법은 매우 유용하며 다양한 웹 개발 시나리오에서 사용될 수 있습니다. 사용자가 목록에서 선택한 값을 기반으로 웹 페이지를 업데이트하거나 다른 기능을 실행하는 등의 작업을 수행할 수 있습니다.
드롭다운 목록에서 선택한 값을 가져오는 JavaScript의 기본적인 개념을 다루었습니다. 이 개념을 잘 익혀두면 웹 개발 작업 중에 드롭다운 목록을 다룰 때 매우 유용할 것입니다. 많은 사용자들이 검색 엔진 최적화(SEO)를 고려하는 중요한 과정인 만큼, 이 문서가 유용하고 검색 결과에서 잘 보이도록 제목과 내용을 적절하게 최적화하였습니다.