JavaScriptを使用してselectのoption(ハングル)昇順と降順をソート
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
Reference
この問題について(JavaScriptを使用してselectのoption(ハングル)昇順と降順をソート), 我々は、より多くの情報をここで見つけました https://velog.io/@dmswjd554/자바스크립트로-select의-option한글-오름차순-내림차순-정렬하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol