select 에서 선택된 값 가져오기 본문

code/Javascript

select 에서 선택된 값 가져오기

남우p 2023. 1. 20. 17:11
<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