jQuery에서 다중 선택 드롭다운 만들기

Habdul Hazeez 2023년6월21일 jQuery jQuery Dropdown
  1. Select2를 사용하여 다중 선택 드롭다운 만들기
  2. Selectize.js를 사용하여 다중 선택 드롭다운 만들기
  3. jQuery Multiselect.js를 사용하여 다중 선택 드롭다운 만들기
jQuery에서 다중 선택 드롭다운 만들기

이 문서에서는 jQuery에서 다중 선택 드롭다운을 만드는 방법을 설명합니다. 세 개의 라이브러리를 사용하여 이 작업을 수행합니다. Select2, Selectize.js 및 jquery multiselect.js.

이러한 라이브러리는 구현이 다르지만 다중 선택 드롭다운을 만드는 데 도움이 됩니다.

Select2를 사용하여 다중 선택 드롭다운 만들기

Select2는 일반 HTML <select> 메뉴를 다중 선택 메뉴로 전환할 수 있는 jQuery 라이브러리입니다. 시작하려면 <선택> 메뉴의 <옵션> 필드에 일부 데이터가 있는지 확인하십시오.

여기에서 Select2 JavaScript 및 cdnjs의 CSS 파일을 포함합니다. 이러한 파일을 jQuery와 함께 <head> 요소에 배치하는 것이 가장 좋습니다.

그런 다음 외부 JavaScript 파일 또는 <script> 태그에서 <select> 메뉴의 Select2를 호출할 수 있습니다. 그런 다음 필요에 맞게 메뉴를 사용자 정의할 수 있습니다.

예를 들어 자리 표시자 텍스트를 변경하고 지우기 버튼을 포함할 수 있습니다. 또한 Select2를 사용하면 <select> 메뉴에 없는 데이터를 포함할 수 있습니다.

아래 코드 예제에서는 Select2를 사용하여 <select> 메뉴를 사용자 지정했습니다. 또한 마지막 단락에서 이야기한 사용자 정의를 찾을 수 있습니다.

더 많은 사용자 정의가 필요한 경우 공식 웹 사이트를 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01-jQuery-multi-select-with-select2</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Include Select2 js library and its CSS files -->
     <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>
</head>
<body>
    <main>
        <form>
            <label>Select G7 Countries</label>
            <select class="G7-countries" name="g7[]" multiple="multiple" style="width: 50%;">
                <option value="Canada">Canada</option>
                <option value="France">France</option>
                <option value="Germany">Germany</option>
                <option value="Italy">Italy</option>
                <option value="Japan">Japan</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
            </select>
        </form>
    </main>
    <script>
    	$(document).ready(function() {
            $('.G7-countries').select2({
                placeholder: 'Select G7 countries',
                allowClear: true,
                tags: true // With this, you can add data that are not in the select options
            });
        });
    </script>
</body>
</html>

출력:

Select2 jQuery 라이브러리 작동

Selectize.js를 사용하여 다중 선택 드롭다운 만들기

Selectize.js는 <select> 메뉴를 드롭다운 메뉴로 바꾸는 또 다른 라이브러리입니다. Select2와 마찬가지로 더 많은 사용자 정의가 있습니다.

여기에는 선택 수 제한 및 제거 버튼 추가가 포함됩니다. 또한 백업 시 복원이 있으므로 선택한 옵션을 삭제하지 않고 백스페이스를 누를 수 있습니다.

아래 첫 번째 예는 <select> 메뉴를 드롭다운 메뉴로 변경하는 방법을 보여줍니다. 또한 선택 항목 수를 제한하는 옵션을 추가했습니다. 그러나 우리는 그것을 주석으로 남겼습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-multi-select-with-selectize-js</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

     <!-- Include Selectize JS files and a CSS library here,
          we are using Bootstrap5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js" integrity="sha512-pgmLgtHvorzxpKra2mmibwH/RDAVMlOuqU98ZjnyZrOZxgAR8hwL8A02hQFWEK25V40/9yPYb/Zc+kyWMplgaA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.bootstrap5.min.css" integrity="sha512-w4sRMMxzHUVAyYk5ozDG+OAyOJqWAA+9sySOBWxiltj63A8co6YMESLeucKwQ5Sv7G4wycDPOmlHxkOhPW7LRg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <main>
        <form>
            <label>Select G7 Countries</label>
            <select class="G7-countries" name="g7[]" multiple="multiple" style="width: 50%;">
                <option value="Canada">Canada</option>
                <option value="France">France</option>
                <option value="Germany">Germany</option>
                <option value="Italy">Italy</option>
                <option value="Japan">Japan</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
            </select>
        </form>
    </main>
    <script>
        $(".G7-countries").selectize({
            // maxItems: 3,
        });
    </script>
</body>
</html>

출력:

Selectize.js 실행

다음은 위 코드에서 maxItems 속성을 활성화했을 때의 출력입니다. 여기서는 세 가지 항목으로 설정했습니다. 따라서 세 개 이상의 옵션을 선택할 수 없습니다.

이후에는 선택 메뉴가 다시 표시되지 않습니다.

선택량에 제한이 있는 Selectize.js

이 두 번째 예에서 HTML을 단일 <input> 필드로 변경했습니다. 이를 통해 태깅 시스템을 만들 수 있습니다. 입력하는 위치이며 선택한 옵션에 포함됩니다.

또한 remove_button 및 restore_on_backspace 플러그인을 활성화했습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-multi-select-with-selectize-js</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

     <!-- Include Selectize JS files and a CSS library here,
          we are using Bootstrap5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js" integrity="sha512-pgmLgtHvorzxpKra2mmibwH/RDAVMlOuqU98ZjnyZrOZxgAR8hwL8A02hQFWEK25V40/9yPYb/Zc+kyWMplgaA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.bootstrap5.min.css" integrity="sha512-w4sRMMxzHUVAyYk5ozDG+OAyOJqWAA+9sySOBWxiltj63A8co6YMESLeucKwQ5Sv7G4wycDPOmlHxkOhPW7LRg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <main>
        <form>
            <input id="input-tags" type="text" name="" style="width: 30%;">
        </form>
    </main>
    <script>
        $("#input-for-tags").selectize({
            plugins: ["remove_button", "restore_on_backspace"], // plugins
            delimiter: ",",
            persist: false,
            create: function (input) {
                return {
                    value: input,
                    text: input,
                };
            },
        });
    </script>
</body>
</html>

출력:

Selectize.js 태깅 기능

jQuery Multiselect.js를 사용하여 다중 선택 드롭다운 만들기

Multiselect.js는 Select2 및 Selectize.js처럼 작동하지만 <select> 메뉴는 모양이 다릅니다. 또한 <선택> 메뉴를 사용자 정의한 후 선택 순서를 유지하는 옵션을 활성화할 수 있습니다.

그것이 없으면 Multiselect.js는 선택 항목을 알파벳순으로 정렬합니다. 시작하려면 그들의 웹사이트에서 Multiselect.js를 다운로드하고 다음을 수행하십시오.

  1. 다운로드한 .zip 파일의 압축을 풉니다.
  2. js 폴더를 찾고 jquery.multi-select.js를 작업 디렉토리에 복사합니다.
  3. css 폴더를 찾고 multi-select.css 파일을 작업 디렉토리에 복사합니다.
  4. img 폴더를 찾아 switch.png를 복사합니다.
  5. 작업 디렉토리에 img 폴더를 만들고 switch.png를 붙여넣습니다.
  6. jquery.multi-select.js 및 multi-select.css 파일을 HTML 파일에 연결합니다.

다음 코드 예제는 작동 중인 Multiselect.js를 보여줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-multi-select-with-selectize-js</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="multi-select-js-and-css/jquery.multi-select.js"></script>
     <link rel="stylesheet" type="text/css" href="multi-select-js-and-css/multi-select.css">
</head>
<body>
    <main>
        <form>
            <label>Select G7 Countries</label>
            <select id="G7-countries" multiple="multiple" style="width: 30%;">
                <option value="Canada">Canada</option>
                <option value="France">France</option>
                <option value="Germany">Germany</option>
                <option value="Italy">Italy</option>
                <option value="Japan">Japan</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
            </select>
        </form>
    </main>
    <script>
    	$('#G7-countries').multiSelect({
            // keepOrder: true
        });
    </script>
</body>
</html>

출력:

Multiselect.js 작동

keepOrder의 출력은 true로 설정됩니다.

keepOrder가 true로 설정된 Multiselect.js

튜토리얼이 마음에 드시나요? DelftStack을 구독하세요 YouTube에서 저희가 더 많은 고품질 비디오 가이드를 제작할 수 있도록 지원해주세요. 구독하다
작가: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

관련 문장 - jQuery Dropdown