[Jquery] selectBox 커스텀 / 셀렉트박스 옵션 변경 / select 플러그인 / 나이스 셀렉트 사용법

화면 작업을 하다 보면 select를 커스텀해야 하는 경우가 많습니다.

css로는 한계가 있을때 nice-select 플러그인을 사용했습니다.

 

 

1. 소스파일 다운로드

jQuery Nice Select

 

2. 필요한 소스 프로젝트에 추가

<!-- css -->
<link rel="stylesheet" href="./nice-select.css"

<!-- js -->
<script src="./jquery.nice-select.js"></script>

 

3. js 추가

<script>
	$(document).ready(function(){
    	$('select').niceSelect();
    })

 

 

⭐️ option쪽에 스크롤이 필요한 경우

.nice-select .list {
	max-height: //원하는 높이값
}

 

⭐️ option을 동적으로 컨트롤할 경우 (옵션 추가, 변경 됐을 때)

옵션이 추가, 변경되는 이벤트가 끝나는 코드 아래로

$('select').niceSelect('update');

 

업데이트 코드를 추가해줘야 합니다.