select 검색하기 / Select2 / JQuery Select2 사용하기

select2는 jquery플러그인으로 우리가 알고있는 기존의 select와 비슷하다.

select box를 선택하면 하단에 목록을 볼 수 있는데, 옵션이 많아지면 스크롤로 왔다갔다하면서 찾아야하는 불편함이 있다.  이때 select2를 사용하면 좋다!

select와 select2와의 차이점은
select2는 옵션값을 검색 할 수 있고, multi로 선택하여 사용할 수 있기 때문에 유용하기 때문이다.

select2 예시화면

select2 multi 옵션 예시화면

 

---

* Import하는 법

select2를 사용할 때 import하는 방법이 2가지 있다.

1. CDN URL이용하여 import하기
2. 플러그인 파일 다운받아 프로젝트에서 import직접하기

1. CDN URL
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

2. 직접 파일 import
<link rel="stylesheet" href="/src/plugins/select2-4.0.13/dist/css/select2.min.css">
<script type="text/javascript" src="/src/plugins/select2-4.0.13/dist/js/select2.min.js"></script>

개발하고 서버를 배포할 때는 2번을 추천하고, 간단히 테스트용이면 1번을 추천한다. 
왜냐하면, 1번같은경우는 간편하지만 플러그인이 모르는 사이에 업데이트 되거나 변경사항이 있을 수 있는데 갑자기 이러한 사항에 영향을 받을 수 있기 때문에 배포하는 프로젝트 같은 경우에는 플러그인 파일을 직접 다운받아 import를 해서 사용한다. 그래야 안정적으로 동작할 수 있기 때문이다!

 

2. 사용법 -1

기본
[HTML]  
   <select name="numberSelect" id="numberSelect">
           <option value="all">전체</option>
           <option value="one">1</option>
           <option value="two">2</option>
           <option value="three">3</option>
    </select>             




[JQuery]
 $(document).ready(function() {
      $('#numberSelect').select(); 
});

사용법은 기존 select와 html코드작성은 동일하다.
JQuery에서 id나 class로 선택자를 정하고 .select2()함수를 호출하면 jquery 함수로써 자체 등록하고 옵션값들로 초기화되어 사용할 수 있다.

multiple타입으로 옵션값들을 다중선택하고 싶을 때는 multiple="multiple"을 추가하면 되고, 나머지는 동일하게 사용하면 된다.

multi
[HTML]  
   <select name="numberSelect" id="numberSelect" multiple="multiple">
           <option value="all">전체</option>
           <option value="one">1</option>
           <option value="two">2</option>
           <option value="three">3</option>
    </select>             




[JQuery]
 $(document).ready(function() {      
     $('#numberSelect').select(); 
});

 

3. 사용법 -2

개발하다보면 api로 데이터를 가져와 동적으로 그리는 경우가 많다.
<script>태그 내부에서 다음과 같이 ajax로 데이터를 가져와 select2에 동적으로 바인딩 하는 방법이다.

//select2 초기 목록 셋팅
$("#numberSelect").select2();
var url="/localhost:8080/example/1.0/number/list";
var numberList = ajaxCall(url, null, false, null, "GET").data;
select2Option('numberSelect' , numberList);




function ajaxCall(url, params, async, opts, method) {
      var result = new Object();
      var defaultOpts = {
            url : url,
            method : method||"POST",
            dataType : "json",
            async : async,
            params : params,
            success : null,
            error : null
      };

      if(opts != null){
            $.extend(defaultOpts, opts);
      }

    var ajax = $.ajax({
        url: defaultOpts["url"],
        type: defaultOpts["method"],
        dataType: defaultOpts["dataType"],
        async: defaultOpts["async"],
        data: defaultOpts["params"],
        success: function(response, status, obj) {
            if(defaultOpts["success"] != null){
            defaultOpts.success(response, status, obj);
         }else{
             result = response;
         }
      },
      error: function(response, status, obj) {
         ajaxJsonErrorAlert(response, status, obj);
      try{
            overlay.hide();}catch(e){}
            if(defaultOpts["error"] != null){
                defaultOpts.error(response, status, obj);
            }else{
                return null;
            }
      }
    });

  if (async) {
    return ajax;
  } else {
    return result;
  }

}

 

4. select2 선택한 값 가져오기

$("#numberSelect").val();

id나 class로 선택자를 정한 후, .val(); 함수를 이용해 선택한 옵션값을 가져오면 된다.

 

 

 

 

 

 

---

* select2 document 사이트이다. 더 자세한 사항은 아래에서 참고하면 된다!
https://select2.org/

Getting Started | Select2 - The jQuery replacement for select boxes

 

* select2 다운로드
https://github.com/select2/select2/releases

Releases · select2/select2

 

* select2 github
https://github.com/select2/select2

GitHub - select2/select2: Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and i