새소식
반응형
Programming language/Javascript,jQuery
[jQuery]select2 플러그인
- -
반응형
콤보박스를 만들 때 흔히 사용하는 select 태그와 관련해 유용한 플러그인을 하나 소개해드릴까 합니다.
select 태그에는 일반적으로 option 값에 대한 검색이 불가능합니다. 하지만 select2 플러그인을 추가하면 option 값을 검색할 수 있습니다.
클라이언트의 요청으로 어떻게 구현하면 좋을지 구글링하던 중 발견한 플러그인으로 사용법이 간단하여 편하고 유용하게 잘 사용했던 기억이 납니다.
1) 사용을 위해 아래 링크를 프로젝트에 Import 하는 방법이 있고, 파일을 내려받아 Import 하는 방법이 있다.
아래 사이트에서 자세한 설명 확인이 가능하다.
Installation | Select2 - The jQuery replacement for select boxes
Installation In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files, also known as a distribution, in your website or application. Using Select2 fro
select2.org
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
2) select 태그 id로 select2() 실행
<script>
$(document).ready(function() {
$("#fruitCombo").select2();
});
</script>
</head>
<body>
<form>
콤보박스 :
<select id="fruitCombo" style="width: 200px">
<option value="">선택</option>
<option value="apple">사과</option>
<option value="watermelon">수박</option>
<option value="peach">복숭아</option>
</select>
</form>
</body>
3) select2() 메서드를 실행하면 아래와 같이 검색창이 자동으로 생성된다.
사실상 설정은 이게 전부이며 여기서 값을 셋팅하거나 초기화하는 방법, 값을 가져오는 방법정도만 알면 필요할 때 잘 사용할 수 있다.
- 값 셋팅
$("#" + id).val(data).select2();: 특정 값을 셋팅하고 싶은 경우 기존 jquery에서 val() 메서드로 값을 넣는 것까지 동일하고 뒤에 select2() 메서드를 추가하면 된다.
<script>
function setFruit(value) {
var fruit = value;
$("#fruitCombo").val(fruit).select2();
}
</script>
<body>
<form>
콤보박스 :
<select id="fruitCombo" style="width: 200px">
<option value="">선택</option>
<option value="apple">사과</option>
<option value="watermelon">수박</option>
<option value="peach">복숭아</option>
</select>
<button type="button" class="btn btn-primary" onclick="setFruit('apple')">사과</button>
<button type="button" class="btn btn-primary" onclick="setFruit('watermelon')">수박</button>
<button type="button" class="btn btn-primary" onclick="setFruit('peach')">복숭아</button>
</form>
</body>
- 값 가져오기
$("#" + id).val();: 값을 가져올 때는 기존과 같이 val() 메서드를 사용하면 된다.
<script>
function getFruit() {
var fruit = $("#fruitCombo").val();
alert("선택된 과일 : " + fruit);
}
</script>
<body>
<form>
콤보박스 :
<select id="fruitCombo" style="width: 200px">
<option value="">선택</option>
<option value="apple">사과</option>
<option value="watermelon">수박</option>
<option value="peach">복숭아</option>
</select>
<button type="button" class="btn btn-primary" onclick="setFruit('apple')">사과</button>
<button type="button" class="btn btn-primary" onclick="setFruit('watermelon')">수박</button>
<button type="button" class="btn btn-primary" onclick="setFruit('peach')">복숭아</button>
<button type="button" class="btn btn-primary" onclick="getFruit()">선택</button>
</form>
</body>
- 초기화
$("#fruitCombo").val("").select2();: 초기화하는 경우도 특별히 다를 것은 없이 val() 메서드 사용 후 select2() 메서드를 사용한다. (중요 : val(""))
<script>
function resetFruit() {
$("#fruitCombo").val("").select2();
}
</script>
<body>
<form>
콤보박스 :
<select id="fruitCombo" style="width: 200px">
<option value="">선택</option>
<option value="apple">사과</option>
<option value="watermelon">수박</option>
<option value="peach">복숭아</option>
</select>
<button type="button" class="btn btn-primary" onclick="setFruit('apple')">사과</button>
<button type="button" class="btn btn-primary" onclick="setFruit('watermelon')">수박</button>
<button type="button" class="btn btn-primary" onclick="setFruit('peach')">복숭아</button>
<button type="button" class="btn btn-primary" onclick="getFruit()">선택</button>
<button type="button" class="btn btn-primary" onclick="resetFruit()">초기화</button>
</form>
</body>
반응형
'Programming language > Javascript,jQuery' 카테고리의 다른 글
| [jQuery]Bootstrap Modal 사용시 focus()가 안되는 현상 (1) | 2020.09.10 |
|---|---|
| [jQuery]문자열로 함수 호출하기 (0) | 2020.06.03 |
| [jQuery]form 초기화 (0) | 2020.04.24 |
| [jQuery UI]드래그 기능 (0) | 2019.12.03 |
| [Javascript]날짜 비교 (0) | 2019.03.22 |
Contents
소중한 공감 감사합니다.