[JS/DOM] 바닐라 자바스크립트로 select태그 option 동적으로 생성, 삭제하기 / 특정 옵션 선택하기

선택하세요.

위와 같이 셀렉트박스와 버튼들을 만든 후,

제이쿼리를 사용하지 않고 순수 자바스크립트로

셀렉트 태그를 동적으로 제어하는 것을 연습해보려고 한다.

var fruitList = [
	{ oKey: 'banana', oVal: '바나나' },
	{ oKey: 'apple', oVal: '사과' },
	{ oKey: 'peach', oVal: '복숭아' },
	{ oKey: 'orange', oVal: '오렌지' }
]

먼저 위와 같은 객체 데이터가 있다.

1. '과일 옵션 추가' 버튼을 클릭하면 위 json데이터의 값들이 셀렉트 태그의 옵션으로 추가되어야 한다.
2. '복숭아 선택' 버튼을 클릭하면 복숭아가 선택되어야한다.
3. '과일 옵션 삭제' 버튼을 클릭하면 '선택하세요.'옵션을 제외하고 나머지 옵션이 모두 삭제되어야 한다.
4. '마지막 과일 옵션 삭제' 버튼을 클릭하면 클릭할 때 마다 오렌지 -> 복숭아 -> 사과 -> 바나나 순으로 삭제되어야 한다.

1. html은 다음과 같다.

<select id="testSel">
	<option value="0">선택하세요.</option>
</select>

<button type="button" id="addOpt">과일 옵션 추가</button>
<button type="button" id="selPeach">복숭아 선택</button>
<button type="button" id="delOpt">과일 옵션 삭제</button>
<button type="button" id="delLastOpt">마지막 과일 옵션 삭제</button>

2. 셀렉트태그 dom을 변수에 담아준다.

var targetSel = document.getElementById('testSel')

3. 옵션 동적으로 생성하기

document.getElementById('addOpt').addEventListener('click', function() {
	if(targetSel.children.length === 1) {
		fruitList.forEach(function(list, i) {
			var opt = document.createElement('option')
			opt.setAttribute('value', list.oKey)
			opt.innerText = list.oVal
			targetSel.appendChild(opt)
		})
	}
})

targetSel.children.length === 1이라는 조건을 준 이유는

저 조건이 없으면 버튼을 누를 때마다 바나나, 사과, 복숭아, 오렌지가 계속 추가되기 때문이다.

딱 한 번만 추가해주기 위해서는 '선택하세요'라는 옵션이 하나만 존재할 때만 추가하도록 해야한다.

fruitList 배열을 forEach문으로 돌린 후 list.oKey와 list.oVal과 같이 도트 연산자로 json의 값을 추출할 수 있다.

option태그를 새로 생성해준 다음

oKey는 value값으로 넣어주고 oVal값은 innerText로 넣어준다.

그리고 targetSel에 appendChild해주면 과일 옵션들이 추가된다.

4. 복숭아 선택하기

document.getElementById('selPeach').addEventListener('click', function() {
	for(var i=0; i<targetSel.children.length; i++) {
		if(targetSel.children[i].value === 'peach') {
			targetSel.children[i].setAttribute('selected', '')
		}
	}
})

for문을 돌린 후 targetSel.children[i]를 console.log에 출력해보면

targetSel의 모든 옵션태그가 출력된다.

targetSel.children[i].value로 각 옵션태그의 value값을 추출할 수 있는데

그 value값이 'peach'라면 해당 옵션 태그 속성에 'selected'를 추가해준다.

5. 과일 옵션 모두 삭제하기

document.getElementById('delOpt').addEventListener('click', function() {
	for(var i=0; i<targetSel.children.length; i++) {
		if(targetSel.children.length > 1 && targetSel.firstChild) {
			targetSel.removeChild(targetSel.lastChild)
			i--
		}
	}
})

for문을 돌려서 삭제해주었는데

조건식을 잘 세우는 것이 중요하다.

먼저 targetSel.children.length가 1보다 커야하고 (1보다 작으면 '선택하세요'라는 옵션밖에 없다는 뜻이니 삭제할 것이 없다.)

targetSel.firstChild가 존재를 해야만 한다. (이 조건이 없으면 '선택하세요'라는 옵션까지 전부 삭제된다.)

그리고 역시나 중요한 포인트는 삭제하면서 i의 개수를 마이너스 시켜주어야 한다는 점.

6. 마지막 과일 옵션 삭제하기

document.getElementById('delLastOpt').addEventListener('click', function() {
	if(targetSel.children.length > 1 && targetSel.firstChild) {
		targetSel.removeChild(targetSel.lastChild)
	}
})

for문을 돌리지 않고 위 코드와 동일한 내용을 쓰면

마지막 요소만 하나씩 삭제가 된다.

cf) 

targetSel.children.length를 사용하여 옵션 태그의 개수를 구했는데

targetSel.childElementCount를 사용할 수도 있다. 

그러나 targetSel.childElementCount는 IE8, IE9, safari에서 지원을 안해준다.

선택하세요.

- 위 버튼을 클릭하여 테스트해보세요. -