[jQuery] select2 사용하기 (option 검색, 다중 선택)

Select2 플러그인을 사용하면 대량의 selectbox 옵션의 값을 선택하는 데 도움이 됩니다. Select2는 사용자에게 검색 기능을 제공하고, 디자인을 정의할 수도 있습니다. 또, Ajax를 통해 데이터를 동적으로 로드할 수 있으며, 다중 선택 가능한 태그 형태로도 보여줄 수 있습니다. Select2를 사용하기 위해서는 jQuery를 필수적으로 필요합니다.

 

아래 예제코드는 Select2를 가장 많이 사용하는 방법인 기본 사용법과 복수 선택의 예제 코드입니다.

 

select 태그의 id (noodles, noodles_multi)를 선택자로 정하고, select2 함수를 호출하면 옵션의 초기값들로 바로 사용하실 수 있습니다. 다중선택인 경우 select 태그 내에 multiple="multiple"만 추가하시면 됩니다.

 

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
	$("#noodles").select2();
	$("#noodles_multi").select2();
});	

</script>
<!-- 기본사용법 -->
<select class="select" id="noodles" name="noodles" style="width:335px">
	<option value="">선 택</option>
	<option value="1">진라면</option>
	<option value="2">신라면</option>
	<option value="3">열라면</option>
	<option value="4">안성탕면</option>
	<option value="5">짜파게티</option>
	<option value="6">참깨라면</option>
</select>

<!-- 복수선택-->
<select multiple class="select" id="noodles_multi" name="noodles_multi" style="width:335px; height:70px;" multiple="multiple">
	<option value="">선 택</option>
	<option value="1">진라면</option>
	<option value="2">신라면</option>
	<option value="3">열라면</option>
	<option value="4">안성탕면</option>
	<option value="5">짜파게티</option>
	<option value="6">참깨라면</option>
</select>

 

기본 사용법 (input창에 option의 내용을 검색)

 

 

다중선택 selectbox