[Bootstrap]bootstrap_multiselect 사용하기

다양한 값을 선택하려고 할 때 셀렉트 박스와 체크박스 두 가지 특징을

구현할 수 있는 멀티 셀렉트 구현 방법입니다.

 

bootstrap multiselect

부트스트랩에서 지원하는 라이브러리입니다.

 

github.com/davidstutz/bootstrap-multiselect

github에서 2개의 파일을 다운로드하여주세요.

1.bootstrap-multiselect.css

2.bootstrap-multiselect.js

 

 

resource 폴더에 넣으신다음 관련 파일을 link로 연결해줍시다.

<link rel="stylesheet" href="/score/resources/css/bootstrap-4.4.1/css/bootstrap-multiselect.css">
<script type="text/javascript" src="/score/resources/css/bootstrap-4.4.1/js/bootstrap-multiselect.js"></script>

 

구현된 소스

JSP에 추가한 소스

<select id="multiselect_gamePlatform" multiple="multiple" name="gamePlatform">
  <option value="PC">PC</option>
  <option value="SWITCH">SWITCH</option>
  <option value="PS3">PS3</option>
  <option value="PS4">PS4</option>
  <option value="PS5">PS5</option>
  <option value="Xbox 360">Xbox 360</option>
  <option value="Xbox One">Xbox One</option>
  <option value="Xbox Series X">Xbox Series X</option>
  <option value="Xbox Series S">Xbox Series S</option>
</select>

JSP에 JS구간에 추가한 소스

$(document).ready(function(){
  $('#multiselect_gamePlatform').multiselect();        
});

 

JSP

 

해당화면이 구현됩니다.