[javascript] 입력 폼에서 옵션 요소의 동적 변경/추가/삭제 처리

11 Dec 2023

javascript

웹 애플리케이션을 개발할 때, 입력 폼에서 옵션 요소의 동적 변경, 추가, 또는 삭제를 구현해야 할 때가 있습니다. 이러한 동작은 사용자 경험을 향상시키는 데 중요하며, JavaScript를 사용하여 이를 구현할 수 있습니다. 이번 포스트에서는 입력 폼에서 옵션 요소를 동적으로 변경, 추가, 또는 삭제하는 방법에 대해 알아보겠습니다.

옵션 요소 동적 변경

1. 단일 선택 옵션 요소 변경

// HTML
<select id="selectBox">
  <option value="1">옵션 1</option>
  <option value="2">옵션 2</option>
  <option value="3">옵션 3</option>
</select>

// JavaScript
document.getElementById("selectBox").value = "2";

2. 다중 선택 옵션 요소 변경

// HTML
<select id="multiSelectBox" multiple>
  <option value="1">옵션 1</option>
  <option value="2">옵션 2</option>
  <option value="3">옵션 3</option>
</select>

// JavaScript
document.getElementById("multiSelectBox").value = ["2", "3"];

옵션 요소 동적 추가

// HTML
<select id="dynamicSelectBox">
  <option value="1">옵션 1</option>
</select>

// JavaScript
var select = document.getElementById("dynamicSelectBox");
var option = document.createElement("option");
option.text = "옵션 2";
option.value = "2";
select.add(option);

옵션 요소 동적 삭제

// HTML
<select id="selectBoxToDelete">
  <option value="1">옵션 1</option>
  <option value="2">옵션 2</option>
  <option value="3">옵션 3</option>
</select>

// JavaScript
var select = document.getElementById("selectBoxToDelete");
select.remove(1);

이러한 기능은 웹 애플리케이션에서 유연하고 동적인 UI를 제공하는 데 도움이 됩니다. 사용자가 선택할 수 있는 옵션 요소를 동적으로 변경, 추가, 또는 삭제함으로써, 사용자가 더 나은 경험을 할 수 있도록 도와줍니다.

이상으로 입력 폼에서 옵션 요소의 동적 변경, 추가, 또는 삭제에 대해 알아보았습니다. 이를 통해 사용자 경험을 개선하는 데 도움이 될 것입니다.