[JQuery] select2 jquery 플러그인 사용하기

1.jquery plugin select2

jQuery Select2는 jQuery 라이브러리용 플러그인으로 사용자 지정 가능한 드롭다운 선택 상자를 제공 한다.
또한 웹 사이트의 디자인에 맞게 선택 상자의 모양을 사용자 정의할 수도 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <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>
    <title>SELECT2 EXAMPLE</title>
</head>
<body>
<form name="select2Form" id="select2Form" method="post">
    <div>
        <select id="nationCode" style="width:200px;">
            <option value="KO">한국</option>
            <option value="JP">일본</option>
            <option value="US">미국</option>
            <option value="EN">영국</option>
        </select>
    </div>		
</form>
</body>

<script>
    $(document).ready(function() {
	    $('#nationCode').select2();
    });
</script>
</html>

2. 실행결과

아래와 같이 SELECT BOX에 검색창이 활성화되고 필터링 기능을 사용할수 있다.

3. 초기화

init

$('#nationCode').val("").trigger('change');

4. 값변경

change value

$('#nationCode').val('US').trigger('change');

5. 클릭이벤트

click event

$('#nationCode').on('select2:select', function (e) {
    var selectedValue = e.params.data.id;
    console.log('Selected value: ' + selectedValue);
});

6.삭제

remove

//select2기능을 제거하고 select box 기능만 가능
$('#nationCode').select2('destroy');

//select2박스 자체를 삭제
$('#nationCode').select2('destroy').remove();

7. placeholder 옵션

값을 선택하기 전에 선택 상자에 자리 표시자로 표시되는 문자열

$('#nationCode').select2({
    placeholder: '국가코드를 선택하세요.'
});

8. allowClear 옵션

선택 상자 옆에 "지우기" 버튼을 표시할지 여부를 결정하는 값

$('#nationCode').select2({
    allowClear: true
});

9 minimumInputLength 옵션

검색 결과가 표시되기 전에 검색 상자에 입력해야 하는 최소 문자 수를 설정하는 정수

$('#nationCode').select2({
    minimumInputLength: 2
});

10. maximumSelectionLength 옵션

검색 결과가 표시되기 전에 검색 상자에 입력해야 하는 최소 문자 수를 설정하는 정수

$('#nationCode').select2({
    maximumSelectionLength: 3
});

11. Ajax 연동

$('#nationCode').select2({
  ajax: {
    url: '/data',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      // process data and return an array of select options
    },
    cache: true
  }
});

저작자표시 비영리 변경금지

'개발 > 기타' 카테고리의 다른 글

[스크립트] 개인정보 범위와 마스킹예제 (이름/주민번호 등) (0)	2023.06.23
[RTSP] nodejs로 rtsp 실시간 스트리밍 서버구축 (0)	2023.05.04
[Jquery] jQuery sweetalert2 alert창 사용하기 (0)	2023.04.16
[Jquery] jQuery Validation Ajax연동과 message custom (0)	2023.04.15
[jquery] summernote 썸머노트 사용예제 (0)	2023.04.10