JavaScript, JQuery - selectBox option 초기화 및 선택 값 변경

JavaScript 및 jQuery에서 <select> 박스의 선택된 옵션을 초기화하거나 변경하는 방법에 대해서 알아보자.

 

---

1. JavaScript로 select 박스 선택값 초기화 및 변경

 

1-1. 선택값 초기화 (첫 번째 옵션 선택)

document.getElementById("mySelect").selectedIndex = 0;

- selectedIndex = 0 을 설정하면 첫 번째 옵션이 선택된다.

 

 

1-2. 선택값 변경 (특정 값 선택)

document.getElementById("mySelect").value = "";

- select.value = "값"을 설정하면 특정 값을 가진 옵션이 선택된다.

 

 

1-3. 모든 선택값 초기화 (기본 선택 없음)

document.getElementById("mySelect").value = "";

 

- value = ""을 설정하면 아무 옵션도 선택되지 않은 상태로 초기화된다.

- <option value="">선택하세요</option> 같은 기본값이 있다면 이 값이 선택된다.

 

 

---

2. jQuery로 select 박스 선택값 초기화 및 변경

 

2-1. 선택값 초기화 (첫 번째 옵션 선택)

$("#mySelect").prop("selectedIndex", 0);

- .prop("selectedIndex", 0)을 사용하면 첫 번째 옵션이 선택된다.

 

 

2-2. 선택값 변경 (특정 값 선택)

$("#mySelect").val("banana");

- .val("값")을 사용하면 특정 값을 가진 옵션이 선택된다.

 

 

2-3. 모든 선택값 초기화 (기본 선택 없음)

$("#mySelect").val("");

- value = ""을 설정하면 아무 옵션도 선택되지 않은 상태로 초기화된다.

- <option value="">선택하세요</option> 같은 기본값이 있다면 이 값이 선택된다.

 

 

---

정리

동작	JavaScript	jQuery
첫 번째 옵션 선택	document.getElementById("mySelect").selectedIndex = 0;	$("#mySelect").prop("selectedIndex", 0);
특정 값 선택	document.getElementById("mySelect").value = "banana";	$("#mySelect").val("banana");
선택값 초기화 (아무 값도 선택 안 함)	document.getElementById("mySelect").value = "";	$("#mySelect").val("");