어제 오늘 내일

[Javascript] 콤보박스(select)에서 선택한 값, 텍스트 출력하기 본문

IT/Javascript

[Javascript] 콤보박스(select)에서 선택한 값, 텍스트 출력하기

hi.anna 2020. 11. 28. 03:30

 

select 태그를 사용한 콤보박스에서 선택한 값과 텍스트를 출력하는 방법을 소개합니다.

1. 콤보박스(select)에서 선택한 값 출력하기
2. 콤보박스(select)에서 선택한 텍스트 출력하기
3. 중복선택 된(multiple) 값과 텍스트 출력하기

 

먼저 select 태그를 이용하여 콤보박스를 만드는 방법은

아래 링크의 이전 포스팅을 참조하세요.

[HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화

[HTML] 콤보박스(select) (2) - 사이즈 지정, 중복선택, 카테고리 설정

 

 

1. 콤보박스(select)에서 선택한 값 출력하기

<select name="language" onchange="handleOnChange(this)">
  <option value="korean">한국어</option>
  <option value="english">영어</option>
  <option value="chinese">중국어</option>
  <option value="spanish">스페인어</option>
</select>
<div id='result'></div>
function handleOnChange(e) {
  // 선택된 데이터 가져오기
  const value = e.value;
  
  // 데이터 출력
  document.getElementById('result').innerText
    = value;
}

(HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요)

 

 <HTML> 

콤보박스(select)가 선택되면 handleOnChange() 함수를 호출하고,

파라미터로 select element를 전달합니다.

 

 <JS> 

파라미터로 넘어온 select element의 value값은

사용자가 선택한 항목의 'value' 속성 값을 리턴합니다.

 

 

2. 콤보박스(select)에서 선택한 텍스트 출력하기

<select name="language" onchange="handleOnChange(this)">
  <option value="korean">한국어</option>
  <option value="english">영어</option>
  <option value="chinese">중국어</option>
  <option value="spanish">스페인어</option>
</select>
<div id='result'></div>
function handleOnChange(e) {
  // 선택된 데이터의 텍스트값 가져오기
  const text = e.options[e.selectedIndex].text;
  
  // 선택한 텍스트 출력
  document.getElementById('result').innerText
    = text;
}

(HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요)

 

이번 예제는

선택한 콤보박스의 텍스트를 출력합니다.

 

e.selectedIndex

선택된 항목의 index값을 가져옵니다.

 

e.options

콤보박스의 선택목록(options) element 목록을 가져옵니다.

 

e.options[e.selectedIndex]

사용자가 선택한 항목의 index를 사용하여

콤보박스의 선택목록에서

사용자가 선택한 콤보박스 선택항목 element를 가져옵니다.

 

e.options[e.selectedIndex].text

마지막으로 선택된 element의 text 값을 가져옵니다.

 

 

3. 중복선택 된(multiple) 값과 텍스트 출력하기

<select name="language" onchange="handleOnChange(this)" multiple>
  <option value="korean">한국어</option>
  <option value="english">영어</option>
  <option value="chinese">중국어</option>
  <option value="spanish">스페인어</option>
</select>
<div id='values'></div>
<div id='texts'></div>
function handleOnChange(e) {
  const values = [];
  const texts = [];
  
  // options에서 selected 된 element 찾기
  for(let i=0; i < e.options.length; i++) {
    const option = e.options[i];
    if(option.selected) {
      values.push(option.value);
      texts.push(option.text);
    }
  }

  // 선택된 데이터 출력
  document.getElementById('values').innerText = values;
  document.getElementById('texts').innerText = texts;
}

(HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요)

 

이번 예제는 multiple 속성이 적용되어

다중 선택이 가능한 경우, 다중 선택된 값과 텍스트를 출력하는 예제입니다.

(

Shift 또는 Ctrl

키를 누르고 선택하면 다중 선택 할 수 있습니다. )

 

다중 선택일 경우

select element의 value 값을 직접 가져올 수 없습니다.

그래서 여기서는

options 목록을 가져와서 각각의 option element의 selected 값을 확인하는 방법으로

선택된 element를 가져온 후,

각 element의 value와 text 값을 출력하였습니다.

 

 

위 코드는 ES6문법과 filter() 함수, map() 함수를 사용하여 좀 더 간결하게 작성 될 수도 있습니다.

<select name="language" onchange="handleOnChange(this)" multiple>
  <option value="korean">한국어</option>
  <option value="english">영어</option>
  <option value="chinese">중국어</option>
  <option value="spanish">스페인어</option>
</select>
<div id='values'></div>
<div id='texts'></div>
function handleOnChange(e) {  
  
  // options에서 selected 된 element의 value 찾기
  const values = [...e.options]
    .filter(option => option.selected)
    .map(option => option.value);
  
  // options에서 selected 된 element의 text 찾기
  const texts = [...e.options]
    .filter(option => option.selected)
    .map(option => option.text);

  // 선택된 데이터 출력
  document.getElementById('values').innerText = values;
  document.getElementById('texts').innerText = texts;
}

(HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요)

 

[...e.options]

options에 filter(), map() 함수를 적용하기 위해

options에 destructuring(구조분해할당)을 적용하여

배열 형태로 만들었습니다.

 

filter(options => option.selected)

options 목록 중

selected 값이 true인 것만 골라냅니다.

 

map(option => option.value)

map(option => option.text)

앞에서 filter로 걸리진 목록의 value 또는 text 값으로 새로운 배열을 만들어서 리턴합니다.

 

 

콤보박스(select)에 선택된 값을 찾아서 출력하는 방법을 알아보았습니다.

 

 

반응형

'IT > Javascript' 카테고리의 다른 글

[Javascript] 숫자 3자리(천단위) 마다 콤마 찍는 2가지 방법  (2) 2020.11.28
[Javascript] 사용자 입력을 도와주는 datalist 알아보기  (0) 2020.11.28
[Javascript] input 박스에 영어만 입력되도록 하는 2가지 방법  (0) 2020.11.28
[Javascript] input 에서 입력 글자수 제한하는 2가지 방법  (2) 2020.11.27
[Javascript] 체크박스 하나만 선택되도록 하기  (1) 2020.11.25
공유하기 링크
'IT/Javascript' Related Articles more
Comments