jQuery select2 사용하기

jQuery select2 사용하기

728x90

728x90

콤보박스를 만들 때 흔히 사용하는 select 태그와 관련해 유용한 플러그인을 하나 소개해드릴까 합니다.

select 태그에는 일반적으로 option 값에 대한 검색이 불가능합니다. 하지만 select2 플러그인을 추가하면 option 값을 검색할 수 있습니다. 클라이언트의 요청으로 어떻게 구현하면 좋을지 구글링하던 중 발견한 플러그인으로 사용법이 간단하여 편하고 유용하게 잘 사용했던 기억이 납니다.

1) 프로젝트에 Import 하는 방법이 있고, 파일을 내려받아 Import 하는 방법이 있습니다.

아래 사이트에서 자세한 설명 확인이 가능합니다.

2) select 태그 id로 select2() 를 호출하여 입혀줍니다.

$(document).ready(function() { $("#fruitCombo").select2(); }); 콤보박스 : 선택 사과 수박 복숭아

3) select2() 메서드를 실행하면 아래와 같이 검색창이 자동으로 생성됩니다.

사실상 설정은 이게 전부이며 여기서 값을 셋팅하거나 초기화하는 방법, 값을 가져오는 방법정도만 알면 필요할 때 잘 사용할 수 있습니다.

사용방법

특정 값을 셋팅하고 싶은 경우 기존 jquery에서 val() 메서드로 값을 넣는 것까지 동일하고 뒤에 select2() 메서드를 추가하면 됩니다.

$("#" + id).val(data).select2();

function setFruit(value) { var fruit = value; $("#fruitCombo").val(fruit).select2(); } 콤보박스 : 선택 사과 수박 복숭아 사과 수박 복숭아

값 가져오기

값을 가져올 때는 기존과 같이 val() 메서드를 사용하면 됩니다.

$("#" + id).val();

function getFruit() { var fruit = $("#fruitCombo").val(); alert("선택된 과일 : " + fruit); } 콤보박스 : 선택 사과 수박 복숭아 사과 수박 복숭아 선택

초기화

초기화하는 경우도 특별히 다를 것은 없이 val() 메서드 사용 후 select2() 메서드를 사용한다. (중요 : val(""))

$("#fruitCombo").val("").select2();

function resetFruit() { $("#fruitCombo").val("").select2(); } 콤보박스 : 선택 사과 수박 복숭아 사과 수박 복숭아 선택 초기화

728x90

728x90

from http://abbo.tistory.com/236 by ccl(A) rewrite - 2021-12-08 16:01:15