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 |
Tags
- git
- Javascript
- 독서
- MariaDB
- spring
- PROMISE
- java
- 네트워크
- SQL
- pandas
- mssql
- 명령어
- 후기
- DBMS
- IntelliJ
- iBatis
- 티스토리챌린지
- 오블완
- oracle
- 자바
- Linux
- Python
- mysql
- 쉘스크립트
- 인덱스
- 리눅스
- PostgreSQL
- docker
- github
- Kibana
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] 여러가지 비동기 HTTP 통신 모듈 (0) | 2025.06.01 |
---|---|
JavaScript - 소괄호, 중괄호, 대괄호 안에 있는 문자열 찾아내기 (0) | 2025.04.06 |
JavaScript - 엔터 키 처리 (keyup 이벤트) (0) | 2025.03.13 |
JavaScript - 비동기 프로그래밍 (Promise, async / await) (0) | 2025.02.08 |
JavaScript - 실행 컨텍스트와 콜 스택(Call Stack) (0) | 2025.02.04 |