상세 컨텐츠

본문 제목

selectbox 이쁘게 만들기, select2 라이브러리로 이쁘게, 그룹으로 묶기까지

IT공부방/HTML5, CSS

by 동해둘리 2023. 6. 21. 11:43

본문

반응형

selectbox 이쁘게, 멀티셀렉트

 

 

기본적인 셀렉트 박스 

 

기본적인 selectbox 태그를 사용하게 되면, 아래와 같은 모양의 selectbox 가 나타나게 됩니다.  그런데, 별로 이쁘지가 않고, 리스트의 내용이 아주 길 경우에는 검색을 할 수가 없기때문에 스크롤을 엄청 오래 해야하는 불편함이 있습니다. 

selectbox 이쁘게, 멀티셀렉트

 

 

select2 라이브러리를 사용하자 

 

select2 라이브러리를 사용하게되면, 아주 손쉽게  아래와 같이 모양도 이쁘고, 검색도 가능한  selectbox를 만들 수 있습니다. 

 

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 도 쉽게 생성할 수 있습니다. 

 

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
반응형
저작자표시 비영리 변경금지

'IT공부방 > HTML5, CSS' 카테고리의 다른 글

ai파일 웹상에서 보기, 일러스트파일 웹, ai파일 웹뷰어, ai웹뷰어  (0) 2023.06.26
CSS 텍스트 형광펜 효과주기/ 전체 형광/ 절반만 형광  (0) 2023.06.16
CSS 로 배경색상을 변경하는 애니메이션 코드... 10초간격 반복변경  (0) 2023.06.15
css를 이용해서 html table에 효과주기 기본, 마우스오버, 라인배경색, 모바일 최적화  (0) 2023.06.14
css버튼 이쁘게 꾸미기, 애니메이션 효과주기  (0) 2022.08.05

관련글 더보기

댓글 영역

티스토리툴바