select2 구현 및 javascript에서 선택값 변경
DevOps/Web 2021. 7. 8. 00:49
html에서 select2 id값을 설정
javascript에서 id값으로 html의 select2 값을 조회 및 변경
<!DOCTYPE html>
<html>
<head>
<title>Select2 Test</title>
<!-- select2 css cdn -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<br />
<div style="margin-left:10px;">
<select class="form-control select2" id="search_type" name="search_type">
<option value="all">ALL</option>
<option value="sql">SQL</option>
<option value="os">OS</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- select2 javascript cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.min.js"></script>
<script>
//Initialize Select2 Elements
$('.select2').select2({
theme: "bootstrap4",
width: 'auto',
dropdownAutoWidth: true
})
//select2 선택값 변경
$('#search_type').val('OS');
// 위 코드로 변경이 되지 않는 경우
$('#search_type').val('OS').trigger('change');
</script>
</body>
</html>'DevOps > Web' 카테고리의 다른 글
| jQuery 테이블의 특정 행(row)값 가져오기 (0) | 2021.07.09 |
|---|---|
| javascript/jquery 클릭 이벤트 강제로 발생 (0) | 2021.07.09 |
| Python flask + db + ajax 호출 (0) | 2021.07.07 |
| [javascript] 날짜 (Date) 사용법 ( 올해, 일주일전, 1일 추가, 포멧 변경) (0) | 2021.07.07 |
| Bootstrap 달력 datetimepicker (with python flask) (0) | 2021.07.06 |
