[jQuery] 제이쿼리 셀렉트박스 플러그인 select box / select option / dropdown / jQuery selectbox plugin

 

코딩할 때 select를 넣으면 select를 열기 전 상태는 css로 어느정도 커버가 가능한데

(색상 변경, 모양 변경, 기본 브라우저 스타일 제거, 화살표 모양 변경)

옵션박스는 그럴수가 없어서 보기 싫을때가 있다. 그럴 때 사용하기 좋은 셀렉트박스 플러그인이다.

자바스크립트 알못인 나도 썼을정도로 간단하고 쉽다.

 

사용법

jqueryniceselect.hernansartorio.com/

jQuery Nice Select

1. 상단의 링크에서 파일을 다운받고 필요한 css파일, 제이쿼리 파일을 사용하려는 위치로 복사해준다.

 

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

2. html 상단 헤드부분에 css파일을 불러와준다. 

 

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

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

3. <seclect><option></option></seclect> 하단에 제이쿼리 파일을 불러오는 이 소스를 넣어준다

제이쿼리 파일은 수정할게 아니니 아래처럼 cdn링크로 추가하여도 된다. 

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

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

 

 

 

 

+

링크에 접속해보면 간단한 변형법들(와이드버전, 스몰버전 등) 예시를 볼 수 있다.

 

+

여러개의 셀렉트박스가 있는데 한개만 하고 싶다거나 몇개만 선택해서 바꿔주고 싶을 경우

해당 seclect에 id를 부여해주고 스크립트의 선택자 부분을 seclect가 아닌 id로 변경해주면 된다.

<script>
  $(document).ready(function() {
    $('선택자 변경').niceSelect();
  });
</script>