Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Tags
- 호이스팅
- java
- IntelliJ
- JPA
- 리눅스
- PPK
- SQL
- github
- oracle
- mssql
- 오블완
- 티스토리챌린지
- SUBQUERY
- Linux
- spring
- MongoDB
- DBMS
- pandas
- analytics4
- 명령어
- docker
- 자바
- PostgreSQL
- pem
- group by
- MariaDB
- Javascript
- git
- mysql
- Python
Archives
- Today
- Total
hanker
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(""); |
반응형
'JavaScript' 카테고리의 다른 글
JavaScript - 엔터 키 처리 (keyup 이벤트) (0) | 2025.03.13 |
---|---|
JavaScript - 비동기 프로그래밍 (Promise, async / await) (0) | 2025.02.08 |
JavaScript - 실행 컨텍스트와 콜 스택(Call Stack) (0) | 2025.02.04 |
JavaScript - this 키워드 (현재 실행 중인 환경에 따라 다른 객체를 참조) (1) | 2025.01.30 |
JavaScript - 호이스팅(Hoisting) (0) | 2025.01.29 |