📖
[Javascript] 콤보박스(select)에서 선택한 값, 텍스트 출력하기
페이지 정보
본문
1. 콤보박스(select)에서 선택한 값 출력하기[code]<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>
<script>
function handleOnChange(e) {
// 선택된 데이터 가져오기
const value = e.value;
// 데이터 출력
document.getElementById('result').innerText
= value;
}
</script>[/code]<HTML>
콤보박스(select)가 선택되면 handleOnChange() 함수를 호출하고,
파라미터로 select element를 전달합니다.
<JS>
파라미터로 넘어온 select element의 value값은
사용자가 선택한 항목의 'value' 속성 값을 리턴합니다.
2. 콤보박스(select)에서 선택한 텍스트 출력하기[code]<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>
<script>
function handleOnChange(e) {
// 선택된 데이터의 텍스트값 가져오기
const text = e.options[e.selectedIndex].text;
console.log(e.options);
// 선택한 텍스트 출력
document.getElementById('result').innerText
= text;
}
</script>[/code]이번 예제는
선택한 콤보박스의 텍스트를 출력합니다.
e.selectedIndex
선택된 항목의 index값을 가져옵니다.
e.options
콤보박스의 선택목록(options) element 목록을 가져옵니다.
e.options[e.selectedIndex]
사용자가 선택한 항목의 index를 사용하여
콤보박스의 선택목록에서
사용자가 선택한 콤보박스 선택항목 element를 가져옵니다.
e.options[e.selectedIndex].text
마지막으로 선택된 element의 text 값을 가져옵니다.
3. 중복선택 된(multiple) 값과 텍스트 출력하기[code]<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>
<script>
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;
}
</script>[/code]이번 예제는 multiple 속성이 적용되어
다중 선택이 가능한 경우, 다중 선택된 값과 텍스트를 출력하는 예제입니다.
(Shift 또는Ctrl 키를 누르고 선택하면 다중 선택 할 수 있습니다. )
다중 선택일 경우
select element의 value 값을 직접 가져올 수 없습니다.
그래서 여기서는
options 목록을 가져와서 각각의 option element의 selected 값을 확인하는 방법으로
선택된 element를 가져온 후,
각 element의 value와 text 값을 출력하였습니다.
위 코드는 ES6문법과 filter() 함수, map() 함수를 사용하여 좀 더 간결하게 작성 될 수도 있습니다.[code]<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>
<script>
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;
}
</script>[/code][...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 값으로 새로운 배열을 만들어서 리턴합니다.
<option value="korean">한국어</option>
<option value="english">영어</option>
<option value="chinese">중국어</option>
<option value="spanish">스페인어</option>
</select>
<div id='result'></div>
<script>
function handleOnChange(e) {
// 선택된 데이터 가져오기
const value = e.value;
// 데이터 출력
document.getElementById('result').innerText
= value;
}
</script>[/code]<HTML>
콤보박스(select)가 선택되면 handleOnChange() 함수를 호출하고,
파라미터로 select element를 전달합니다.
<JS>
파라미터로 넘어온 select element의 value값은
사용자가 선택한 항목의 'value' 속성 값을 리턴합니다.
2. 콤보박스(select)에서 선택한 텍스트 출력하기[code]<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>
<script>
function handleOnChange(e) {
// 선택된 데이터의 텍스트값 가져오기
const text = e.options[e.selectedIndex].text;
console.log(e.options);
// 선택한 텍스트 출력
document.getElementById('result').innerText
= text;
}
</script>[/code]이번 예제는
선택한 콤보박스의 텍스트를 출력합니다.
e.selectedIndex
선택된 항목의 index값을 가져옵니다.
e.options
콤보박스의 선택목록(options) element 목록을 가져옵니다.
e.options[e.selectedIndex]
사용자가 선택한 항목의 index를 사용하여
콤보박스의 선택목록에서
사용자가 선택한 콤보박스 선택항목 element를 가져옵니다.
e.options[e.selectedIndex].text
마지막으로 선택된 element의 text 값을 가져옵니다.
3. 중복선택 된(multiple) 값과 텍스트 출력하기[code]<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>
<script>
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;
}
</script>[/code]이번 예제는 multiple 속성이 적용되어
다중 선택이 가능한 경우, 다중 선택된 값과 텍스트를 출력하는 예제입니다.
(Shift 또는Ctrl 키를 누르고 선택하면 다중 선택 할 수 있습니다. )
다중 선택일 경우
select element의 value 값을 직접 가져올 수 없습니다.
그래서 여기서는
options 목록을 가져와서 각각의 option element의 selected 값을 확인하는 방법으로
선택된 element를 가져온 후,
각 element의 value와 text 값을 출력하였습니다.
위 코드는 ES6문법과 filter() 함수, map() 함수를 사용하여 좀 더 간결하게 작성 될 수도 있습니다.[code]<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>
<script>
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;
}
</script>[/code][...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 값으로 새로운 배열을 만들어서 리턴합니다.
댓글목록
등록된 댓글이 없습니다.
  |