IT공부방/HTML5, CSS
selectbox 이쁘게 만들기, select2 라이브러리로 이쁘게, 그룹으로 묶기까지
동해둘리
2023. 6. 21. 11:43
반응형
기본적인 셀렉트 박스
기본적인 selectbox 태그를 사용하게 되면, 아래와 같은 모양의 selectbox 가 나타나게 됩니다. 그런데, 별로 이쁘지가 않고, 리스트의 내용이 아주 길 경우에는 검색을 할 수가 없기때문에 스크롤을 엄청 오래 해야하는 불편함이 있습니다.
select2 라이브러리를 사용하자
select2 라이브러리를 사용하게되면, 아주 손쉽게 아래와 같이 모양도 이쁘고, 검색도 가능한 selectbox를 만들 수 있습니다.
* select2 라이브러리를 사용하려면 먼저 아래와 같은 코드를 페이지에 삽입해야 합니다.
|
1
2
3
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
|
cs |
* 그런 후에 아래와 같이 document.ready 에서 해당 selectbox에 select2() 함수를 적용시켜주기만 하면 됩니다.
|
1
2
3
4
5
6
|
<script language = "javascript">
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.my-selectbox').select2();
});
</script>
|
cs |
그룹이 가능한 selectbox
아래 그림처럼 그룹핑이 되어 있는 selectbox 도 쉽게 생성할 수 있습니다.
아래와 같은 형태로 optgroup 태그를 이용하여 그룹을 만들고, 각각의 그룹 하위에 option 태그를 사용하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<select class="my-selectbox2" style="width:200px;">
<optgroup label="중국집">
<option value="짜장">짜장</option>
<option value="짬뽕">짬뽕</option>
<option value="탕수육">탕수육</option>
</optgroup>
<optgroup label="일식">
<option value="라멘">라멘</option>
<option value="스시">스시</option>
<option value="초밥">초밥</option>
</optgroup>
<optgroup label="한식">
<option value="비빔밥">비빔밥</option>
<option value="설렁탕">설렁탕</option>
<option value="삼겹살">삼겹살</option>
</optgroup>
</select>
|
cs |
지금까지의 모든 selectbox 가 들어있는 코드는 아래와 같습니다. 참고로, CSS 에 정의되어 있는 select2-selection--single 는, link 태그로 포함되어 있는 select2.min.css 에 기본적으로 정의되어 있는 CSS 선택자인데, 코드 내에서 이를 재정의 하여 사용하는 예를 보여드린 겁니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<style>
/* 선택된 옵션 스타일링 */
.select2-selection--single {
height: 36px !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
padding: 3px !important;
}
</style>
</head>
<body>
<!-- Select2 셀렉트 박스 -->
<select style="width:200px;">
<option value="짜장">짜장</option>
<option value="비빔밥">비빔밥</option>
<option value="짬뽕">짬뽕</option>
<option value="삼겹살">삼겹살</option>
<option value="스시">스시</option>
</select>
<select class="my-selectbox" style="width:200px;">
<option value="짜장">짜장</option>
<option value="비빔밥">비빔밥</option>
<option value="짬뽕">짬뽕</option>
<option value="삼겹살">삼겹살</option>
<option value="스시">스시</option>
</select>
<select class="my-selectbox2" style="width:200px;">
<optgroup label="중국집">
<option value="짜장">짜장</option>
<option value="짬뽕">짬뽕</option>
<option value="탕수육">탕수육</option>
</optgroup>
<optgroup label="일식">
<option value="라멘">라멘</option>
<option value="스시">스시</option>
<option value="초밥">초밥</option>
</optgroup>
<optgroup label="한식">
<option value="비빔밥">비빔밥</option>
<option value="설렁탕">설렁탕</option>
<option value="삼겹살">삼겹살</option>
</optgroup>
</select>
<select class="my-selectbox3" style="width:200px;border: 1px solid #DE4C4C;background-color: #FFC0C0;">
<option value="1">옵션 1</option>
<option value="2">옵션 2</option>
<option value="3">옵션 3</option>
<option value="4">옵션 4</option>
<option value="5">옵션 5</option>
</select>
<script language = "javascript">
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.my-selectbox').select2();
$('.my-selectbox2').select2();
$('.my-selectbox3').select2();
});
</script>
</body>
</html>
|
cs |
반응형