이전 포스팅에서 select2를 간단하게 사용하는 방법을 포스팅했다.
2022.06.10 - [Develope/javascript] - [javascript/select2] select2를 이용해 검색이 가능한 select 를 만들어보자. #01
[javascript/select2] select2를 이용해 검색이 가능한 select 를 만들어보자. #01
가끔씩 드랍다운 리스트 (select) 를 사용할때 검색이 되도록 만들고 싶을때가 많다. 몇가지 제공되고 있는 오픈소스들이 있는데 나는 그중 select2 를 자주 사용한다. 간단하게 사용할수도있고 기
omjk.tistory.com
이번에는 select2에서 그룹화 방법을 포스팅한다.
그룹화를 지정하면 다음과 같이 그룹별로 아이템들을 엮을 수 있어 가독성이 좋아진다.
<select>
<optgroup label="fruit">
<option>Apple</option>
<option>Watermelon</option>
</optgroup>
<optgroup label="Vegetable">
<option>Onion</option>
<option>Celery</option>
</optgroup>
</select>optgroup 이 그룹화되는 이름이며 label이 그룹명칭이 된다.
<script type="text/javascript">
$(document).ready(function(){
$('select').select2();
})
</script>마찬가지로 헤더에 select2를 초기화해주면 된다.
코드는
http://jsfiddle.net/moojin/3798jp1L/24/#save
[select2] group - JSFiddle - Code Playground
jsfiddle.net
여기서 확인 가능하다.
'Develope > javascript' 카테고리의 다른 글
| [javascript/select2] bootstrap modal에서 select2 문제해결 (0) | 2022.06.22 |
|---|---|
| [javascript/select2] Create a searchable select using select2. #01 (ENG) (0) | 2022.06.18 |
| [javascript/select2] select2를 이용해 검색이 가능한 select 를 만들어보자. #01 (2) | 2022.06.10 |