검색 가능한 select 박스
셀렉트 박스의 옵션이 많아지면 스크롤 길이도 어마 어마 하고 불편합니다.
오름순으로 정렬 하여 데이터를 나열하면 되지만.
우리의 클라이언트들은 참을성이 많지가 않습니다.
그래서 오늘은 아주 쓸만한 컴포넌트를 준비했습니다.
select2 라는 jquery 플러그인이다.
아래 홈페이지에서 자세한 정보를 찾아보자.
하지만 익스프레스하게 알려드리기 위해
아주 기초적이고 간단하게 코딩을 해보았습니다.
▼우선 아래처럼
select2.css , select2.js를 참조 시키자 그리고 jquery는 기본
1 2 | <link href="select2.css" rel="stylesheet"/> <script src="select2.js"></script> | cs |
▼참고로 jquery 참조 URL은 외웁시다.
1 | <script src="http://code.jquery.com/jquery.min.js"></script> | cs |
http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.min.js
이렇게 3번 쓰면 외워집니다.
▼해당 선택자의 .select2();를 붙이면 작동합니다.
1 2 3 4 5 | <script> $(document).ready(function () { $("#ee").select2(); }); </script> | cs |
▼소스의 합은 이렇습니다. 가장 기본적으로 알아보기 쉽게 만들어보았습니다.
<script src="http://code.jquery.com/jquery.min.js"></script>
<head>
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
<script>
$(document).ready(function () {
$("#ee").select2();
});
</script>
</head>
<body>
<select id="ee">
<option value="">서태지</option>
<option value="">양현석</option>
<option value="">이주노</option>
</select>
</body>
<head>
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
<script>
$(document).ready(function () {
$("#ee").select2();
});
</script>
</head>
<body>
<select id="ee">
<option value="">서태지</option>
<option value="">양현석</option>
<option value="">이주노</option>
</select>
</body>
▼첨부파일을 한폴더에 풀고 실행해보세요
select2.css
test.html▼클릭하면 셀렉트 박스이고 검색할 수 있는 검색창이 있네요
마무리
플러그인을 잘 사용하는 개발자가 됩시다.
'IT_Developers > Javascript' 카테고리의 다른 글
| jQuery - 게시판 정렬하기 / Table sort (0) | 2017.12.05 |
|---|---|
| jQuery - 제이쿼리로 QR코드 만들기 (0) | 2017.12.02 |
| Javascript - 아이폰,안드로이드 기기 체크 (0) | 2017.11.02 |
| jQuery - 바코드(barcode) 만들기 (4) | 2017.09.04 |
| JavaScript - select 박스의 option value, text 가져오기 (0) | 2017.08.31 |
댓글