일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 언젠간가겠지
- chart responsive
- 대표님물리기없기
- 안짤렸다
- 커스텀훅
- windowwidth
- 포트폴리오
- classList add
- new set()
- react-router-dom
- 방심은금물
- set()
- 퍼블리싱
- ROUTER 버전6
- classList toggle
- 냥빨이다가온다
- 리엑트할수있는퍼블리셔라규
- react-router
- chart.js
- className
- 2020
- classList
- 클래스 토글
- 를
- 간식금지다!
- 접근성
- react
- 배열중복제거
- 내배위의고양이
- classList remove
Archives
- Today
- Total
틈
select 에서 선택된 값 가져오기 본문
<script>
document.addEventListener("DOMContentLoaded", () => {
const select = document.querySelector("select");
const p = document.querySelector("p");
select.addEventListener("change", (event) => {
const options = event.currentTarget.options;
const index = options.selectedIndex;
const list = [];
for (const option of options) {
if (option.selected) {
list.push(option.textContent);
}
}
p.textContent = `선택 : ${list.join(", ")}`;
});
});
</script>
<select name="" id="" multiple>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
<option>튀김</option>
</select>
<p>떡볶이</p>
select에서 option 값을 가져오는 방법은 value 로만 알고 있었는데,
이렇게 텍스트를 가져올 수 있네요.
multiple 옵션의 경우에는 값을 가져올 때 배열로 받아서 처리하니 간편합니다.
with. 윤인성(유니코딩) _ 혼자공부하는 자바스크립트
'code > Javascript' 카테고리의 다른 글
[ES6] new Set() (0) | 2023.02.28 |
---|---|
try catch 구문 (0) | 2023.01.26 |
[jQuery] count up (0) | 2022.12.01 |
[jQuery] :visible 이용한 razy loading (0) | 2022.12.01 |
[jQuery] resize debounce 설정(최적화) (0) | 2022.07.14 |
Comments