콤보박스(select)에서 선택된 Option의 value와 text를 가져오는 방법에 대해서 알아보겠습니다.

select에서 선택한 Option의 Value, Text 가져오기

select에서 선택된 Option 값과 텍스트를 출력하는 예제입니다.

HTML

select로 콤보 박스를 추가하였고, 3개의 옵션을 추가하였습니다. 그리고 버튼을 추가하였고 클릭하면 select에 선택된 옵션 값과 텍스트를 가져와서 <div>에 출력하려고 합니다.

<select id="combo-box">
  <option value="option1">옵션 1</option>
  <option value="option2">옵션 2</option>
  <option value="option3">옵션 3</option>
</select>

<button onclick="printSelectedValue()">값 출력</button>

<div id="selected-value"></p>

Javascript

버튼이 클릭되면 printSelectedValue() 함수가 호출되며 선택된 옵션의 값과 텍스트가 출력됩니다.

  • document.getElementById("combo-box") : combo-box의 select 요소 가져옴
  • comboBox.value : select의 선택된 옵션의 value를 가져옴
  • comboBox.selectedIndex : 선택된 옵션의 Index
  • comboBox.options[comboBox.selectedIndex].text : 선택된 옵션의 텍스트를 가져옴
function printSelectedValue() {
  let comboBox = document.getElementById("combo-box");
  let selectedValue = comboBox.value;
  let selectedText = comboBox.options[comboBox.selectedIndex].text;

  let output = "value: " + selectedValue + ", text: " + selectedText;
  document.getElementById("selected-value").textContent = output;
}