jquery-select2jquery-select2 시작하기


비고

이 절에서는 jquery-select2가 무엇인지, 그리고 개발자가 왜 그것을 사용하려고하는지에 대한 개요를 제공합니다.

또한 jquery-select2 내의 큰 주제를 언급하고 관련 주제에 링크해야합니다. jquery-select2에 대한 문서가 새로운 것이므로 관련 주제의 초기 버전을 만들어야 할 수도 있습니다.

버전

번역 릴리스 노트 링크 출시일
4.0.3 (현재) Select2 4.0.3 2016-05-27
4.0.2 Select2 4.0.2 2016-03-09
4.0.2 RC1 Select2 4.0.2-rc1 2016-02-14
4.0.1 Select2 4.0.1 2015-11-27
4.0.1 RC1 Select2 4.0.1-rc1 2015-11-10
3.5.4 Select2 3.5.4 2015-08-30
3.5.3 Select2 3.5.3 2015-08-20
** 이전 버전은 다음에서 찾을 수 있습니다. select2 / 해제 2015-08-20

Jquery - Select2 설치 및 설정

Select2를 두 가지 방법 중 하나로 포함하거나 설치할 수 있습니다.

  1. 프로젝트의 헤드 섹션 아래에서 프로젝트의 CDN을 직접 사용하십시오.

link href = " https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"rel = "stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"/>
 
  1. 로컬 컴퓨터에 코드를 다운로드하여 프로젝트에 포함하십시오. 그것은 다음과 같이 보일 것입니다. 여기에 이미지 설명을 입력하십시오.

그런 다음이 행을 html 페이지의 head 섹션에 포함 시키십시오.

  <link href="select2.min.css" rel="stylesheet" />
  <script src="select2.min.js"></script>
 

참고 : 올바르게 작동하려면 Select2 프로젝트에 Jquery를 포함시켜야합니다.

PITFALL : jquery와 Select2의 현재 버전이 충돌하거나 Select2 기능이 작동하지 않는 경우. 그런 다음 select2 변수와 구현을 문서 본문 $ (document) .ready (function () {// select2 code .....})의 별도 블록으로 이동합니다.

사용 방법 : 다음과 같이 <select> 를 정의 할 수 있습니다.

<select id="select2_example">
    <option>Test</option>
</select>
 

접근법 1 :

      var _mSelect2 = $("#select_example").select2();
 

접근법 2 :

  <script type="text/javascript">
      $('select').select2();
  </script>
 

이 접근 방식을 사용하면 정의 된 '선택'컨트롤 페이지가 Select2의 기능을 상속받습니다. 특정 컨트롤에만 Select2를 사용하려면이 단계를 건너 뛰고 다른 select 컨트롤에 대해 select2 기능을 직접 사용하고 jquery / javascript 기능을 사용하는 코드를 직접 작성하십시오. 그러나 Jquery에 대해 Select2를 통해 조작 된 값을 사용할 수도 있고 그 반대로도 사용할 수 있습니다.

'기본 사항'의 또 다른 예는 선택 2 GIT 문서에서 찾을 수 있습니다 여기에

Select2 GIT 프로젝트가 있습니다 . 이 제품의 세부 기능은 Select2 Github 사이트를 방문하십시오.

Select2 드롭 다운의 선택된 요소를 삭제합니다.

Select2 드롭 다운을 사용하여 선택된 값을 지우려면 empty () 함수를 사용할 수 있습니다.

<select id="select2_example">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
 

드롭 다운은 Jquery를 사용하여 재설정 할 수 있습니다.

$("#select2_example").empty();
 

또한 아래와 같이 재설정 할 수 있습니다.

$("#select2_example").select2("val", "");