IE 브라우저 : 자바스크립트로 select의 option 동적으로 검색하기 기능

비전공자·2021년 10월 19일
0

display:none을 쓸 수 없을 때, 제이쿼리를 쓰지 않고 자바스크립트로만 작성.입력하는 input 태그엔.

  1. select의 innerHTML을 검색 함수 앞에다 붙여둠 (select의 innerHTML 초기화) 또는 전역 변수에 innerHTML 담아두고 검색 함수에서 대입하기(대신 IE 구버전에서는 innerHTML을 쓰면 오류)

  2. 입력값을 포함하는지 option들을 순회하는 for문 작성

※ 주의 : 이렇게 코드를 짜면 option들의 순서가 역순으로 바뀜


select, option 노드들을 변수에 저장하는 코드~~

select객체.innerHTML = '<option text="" name=""...>...</option>'


for(var i=0; i<자식노드배열.length; i++){
  if(입력값을 포함하는 항목이 있을  -> indexOf 쓰면 된다){
      부모노드.insertBefore(자식노드[i], (부모노드.hasChildNodes() ? 
      부모노드.childNodes[0] : null));
  }
  else{
      숨길노드.innerHTML = "";
      숨길노드.style.backgroundColor = "배경색";
  }
}
profile
JUST DO IT!

0개의 댓글