티스토리 뷰
콤보박스를 만들 때 흔히 사용하는 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() 메서드를 실행하면 아래와 같이 검색창이 자동으로 생성됩니다.
사실상 설정은 이게 전부이며 여기서 값을 셋팅하거나 초기화하는 방법, 값을 가져오는 방법정도만 알면 필요할 때 잘 사용할 수 있습니다.
사용방법
특정 값을 셋팅하고 싶은 경우 기존 jquery에서 val() 메서드로 값을 넣는 것까지 동일하고 뒤에 select2() 메서드를 추가하면 됩니다.
$("#" + id).val(data).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>
값 가져오기
값을 가져올 때는 기존과 같이 val() 메서드를 사용하면 됩니다.
$("#" + id).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>
초기화
초기화하는 경우도 특별히 다를 것은 없이 val() 메서드 사용 후 select2() 메서드를 사용한다. (중요 : val(""))
$("#fruitCombo").val("").select2();<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>'Client' 카테고리의 다른 글
| [CSS3] 문장의 공백과 줄바꿈을 처리하는 white-space (자동 줄바꿈 방지) (2) | 2021.12.20 |
|---|---|
| [TypeScript] JSON 모듈 (2) | 2021.12.17 |
| [TypeScript] Fetch API 에 대해 알아보자 (0) | 2021.12.09 |
| Thymeleaf Strings 공백문자 처리 (isEmpty) (2) | 2021.11.30 |
| Thymeleaf 기본 문법 (0) | 2021.11.29 |
| Javascript 의 JSON foreach 를 사용하기 (0) | 2021.08.30 |