[jQuery] option 태그 주석 처리하는 방법 (select 검색 기능 만들기)

[jQuery] option 태그 주석 처리하는 방법 (select 검색 기능 만들기)

  오후 2:19    홍다슬

---

Laptop

운영체제	Windows 10 Pro 64bit
개발환경	Chrome 버전 78.0.3904.108 jQuery 1.9.1

select 내부의 option 태그를 조건에 따라 보이거나 숨기고 싶을때, <span>태그로 둘러쌈으로써 구현할 수 있다.
jquery로 .wrap(), .unwrap() 함수를 이용하면 된다.

예)

<select>
  <option value="C">C</option>
  <option value="C++">C++</option>
  <option value="Java">Java</option>
  <option value="JavaScript">JavaScript</option>
</select>

↓

$("select option[value='C']").wrap("<span/>");

↓

<select>
  <span><option value="C">C</option></span>
  <option value="C++">C++</option>
  <option value="Java">Java</option>
  <option value="JavaScript">JavaScript</option>
</select>

단, unrwrap 시 html 구조가 select > span > option이 되므로 선택자 입력 시 주의해야한다. (지금의 경우에는 위 wrap 코드에서 unwrap으로만 바꾸면 된다.)

이것을 응용하여 검색창에 입력된 단어를 포함하는 내용만 나오도록 option을 조정하는 기능을 만들 수 있다.

- 참고 사이트: https://stackoverflow.com/questions/36066953/css-hide-options-from-select-menu-on-iphone-safari/44332652