2022. 7. 5. 15:34ㆍ[Plug_in]_
사용 목적
기본적으로 html 에서 제공하는 select 의 경우
목록이 적으면 상관이 없지만,
만약 몇십~몇백개의 options 가 있다면, 화면도 다 가릴 뿐 더러, 실용성도 떨어질 겁니다.
일정 목롤을 보여주고, 스크롤바가 생기며, options 을 검색할수 있으면 해결이 됩니다.
이를 구현하기 위해 사용했던 select2 플러그인을 소개합니다.
설치
공식 Git 사이트에 접속합니다.
https://github.com/select2/select2/tree/develop/dist
GitHub - select2/select2: Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and i
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. - GitHub - select2/select2: Select2 is a jQuery based replacement...
github.com
js 폴더의 select2.full.min.js 를 다운로드
css 폴더의 select2.min.css 를 다운로드 합니다.
이제 사용할 프로젝트 페이지에 해당 파일을 참조하여 사용합니다.
단 JQuery 참조를 먼저 하고 그뒤에 select2 를 참조합니다.
<Script>
<link rel="stylesheet" type="text/css" href="/resources/assets/css/select2.min.css"><script type="text/javascript" src="/resources/assets/js/select2.full.min.js"></script>와 같이 프로젝트 경로에 맞도록 설정합니다.
단순 예제 ( 공식 홈페이지 참고 )
<html>
select2 가 될 select 속성의 element를 생성합니다.
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
...생략
<option value="WY">Wyoming</option>
</select><script>
JQuery 로 해당 select 엘리먼트에 select2() 를 붙입니다.
$(document).ready(function() {
$('.js-example-basic-single').select2();
});실행 화면
이처럼 단순 선언만 해 주어도, 검색창과 스크롤이 생깁니다.
다음 포스팅에서는 좀 더 많은 옵션과, 메소드를 알아보겠습니다.
감사합니다.
'[Plug_in]_' 카테고리의 다른 글
| [bxSlider]_Added non-passive event listener to a scroll-blocking ISSUE (0) | 2022.07.15 |
|---|---|
| [select2]_select2 옵션, 설정 ,심화 _(select2 예제) (0) | 2022.07.05 |
| [bootstrap-datepicker]_부트스트랩 데이트 피커 설치,운용 (0) | 2022.07.05 |
| [bxSlider]_슬라이더 index 구하기, 이벤트 부여하기 (0) | 2022.07.01 |
| [bxSlider]_bxSlider 설치, 단순 예제 (0) | 2022.06.30 |