hanker

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

JavaScript

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

hanker 2025. 3. 14. 07:15
반응형

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("");

 

반응형