jQuery에서 다중 선택 드롭다운 만들기
-
Select2를 사용하여 다중 선택 드롭다운 만들기 -
Selectize.js를 사용하여 다중 선택 드롭다운 만들기 -
jQuery
Multiselect.js를 사용하여 다중 선택 드롭다운 만들기
이 문서에서는 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>
출력:
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>
출력:
다음은 위 코드에서 maxItems 속성을 활성화했을 때의 출력입니다. 여기서는 세 가지 항목으로 설정했습니다. 따라서 세 개 이상의 옵션을 선택할 수 없습니다.
이후에는 선택 메뉴가 다시 표시되지 않습니다.
이 두 번째 예에서 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>
출력:
jQuery Multiselect.js를 사용하여 다중 선택 드롭다운 만들기
Multiselect.js는 Select2 및 Selectize.js처럼 작동하지만 <select> 메뉴는 모양이 다릅니다. 또한 <선택> 메뉴를 사용자 정의한 후 선택 순서를 유지하는 옵션을 활성화할 수 있습니다.
그것이 없으면 Multiselect.js는 선택 항목을 알파벳순으로 정렬합니다. 시작하려면 그들의 웹사이트에서 Multiselect.js를 다운로드하고 다음을 수행하십시오.
- 다운로드한
.zip파일의 압축을 풉니다. js폴더를 찾고jquery.multi-select.js를 작업 디렉토리에 복사합니다.css폴더를 찾고multi-select.css파일을 작업 디렉토리에 복사합니다.img폴더를 찾아switch.png를 복사합니다.- 작업 디렉토리에
img폴더를 만들고switch.png를 붙여넣습니다. 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>
출력:
keepOrder의 출력은 true로 설정됩니다.
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