자바스크립트로 select의 option(한글) 오름차순, 내림차순 정렬하기

비전공자·2021년 10월 18일
0
1. getElementsClassName("클래스이름")[0] 을 이용해 select 선택



2. getElementsByTagName("option") 으로 option들을 변수에 저장
참고로 리턴 값은 HTMLCollection임



3. HTMLCollection을 배열로 변환
Array.prototype.slice.call(items);	(IE 안 됨)

var tmp = [];
for (var i=0; i<items.lenght; i++){  	(IE 가능)
	tmp.push(items[i]);
}


4. 배열 속성 중 하나 골라서 (ex. text) 해당 속성을 기준으로 배열을
'배열.sort(a,b=>정렬식)' 과 같이 오름차순/내림차순으로 정리 



5. 정렬한 배열로 새 노드를 만들어 기존 노드와 교체(그냥 변수에 넣는다고
html이 바뀌진 않음)
기억에 의존해서 작성한거라 틀린 부분이 있을 수 있음!

for(i=0; i<배열.length; i++){
  var newNode = document.createElement("option");
  newNode.text = oldNode[i].text;
  newNode.value = oldNode[i].value;
  newNode.innerHTML = oldNode[i].innerHTML;
  ...
  selectBox.replaceChild(newNode, oldNode[i]);
}

- CSS 스타일까지 같게 하고 싶으면 이런 식으로...
newNode.style.backgroundColor = oldNode.style.backgroundColor

profile
JUST DO IT!

0개의 댓글