웹 어플리케이션에서 드롭다운을 사용하여 사용자가 선택할 수 있는 옵션을 제공하는 것은 매우 일반적입니다. 이번에는 JavaScript를 사용하여 입력 폼에서 드롭다운 선택 기능을 추가하는 방법에 대해 알아보겠습니다.

HTML 입력 폼 구성하기

우선, HTML을 사용하여 입력 폼을 구성합니다. 예를 들어, 아래와 같은 드롭다운이 있는 입력 폼을 만들어 보겠습니다.

<form>
  <label for="cars">차량을 선택하세요:</label>
  <select id="cars">
    <option value="volvo">볼보</option>
    <option value="saab">사브</option>
    <option value="mercedes">메르세데스</option>
    <option value="audi">아우디</option>
  </select>
</form>

JavaScript를 사용하여 드롭다운 선택 기능 구현하기

이제, JavaScript를 사용하여 드롭다운을 선택할 때 동작하는 기능을 추가해보겠습니다. 아래 코드를 사용하면 드롭다운이 변경될 때 선택한 옵션에 해당하는 내용이 출력됩니다.

document.getElementById("cars").addEventListener("change", function() {
  var selectedCar = this.value;
  alert("선택한 차량은 " + selectedCar + "입니다.");
});

위의 코드는 사용자가 드롭다운에서 옵션을 선택할 때마다 해당 선택된 값을 알림으로 표시하는 예시입니다. 실제로는 선택된 값을 다른 방식으로 사용하거나 표시하는 것이 더 일반적일 것입니다.

드롭다운이나 다른 입력 폼 요소에 JavaScript 이벤트를 추가하는 방법에 대해 더 배우려면 JavaScript 이벤트 리스너 에 대해 알아보세요.

이제 위의 코드를 참고하여 자신의 웹 어플리케이션에 드롭다운 선택 기능을 추가해보세요!