728x90
[HTML, Javascript] SELECT BOX(셀렉트 박스)를 선택하면 다른 SELECT BOX가 유동적으로 변하게 만드는법
01. html body 부분
<body id="page-top">
...
<form method="GET">
<div class="subway-line">
<label for="select_subway" class="forlabels">호선: </label>
<select class="" style="width:600px;height:100px;" name="select_subway" id="select_subway" onchange="changeSelectFunction(this.value)">
<option value="" disabled selected>-- 호선을 선택해주세요 --</option>
<option value="line1">1호선</option>
<option value="line2">2호선</option>
<option value="line3">3호선</option>
<option value="line4">4호선</option>
<option value="line5">5호선</option>
<option value="line6">6호선</option>
<option value="line7">7호선</option>
<option value="line8">8호선</option>
<option value="line9">9호선</option>
</select>
</div>
<div class="subway-name">
<label for="select_station" class="forlabels">역이름: </label>
<select name="select_station" id="select_station" style="width:600px;height:100px;">
<option>-- 역이름을 선택해주세요 --</option>
</select>
</div>
<div class="start-btn">
<button type="submit" class="btn btn-primary">출발~</button>
</div>
</form>
...
<!-- 자바스크립트(js) 파일 불러오기 -->
<script src="static/bootstrap/js/scripts.js"></script>
...
</body>
■ 「script src="js파일의 경로"」를 설정
■ select태그의 onchange 속성에 함수를 설정
02. javascript(js)
function changeSelectFunction(selected_value){
var line1 = ["동대문", "동묘앞", "서울역", "시청", "신설동", "제기동", "종각", "종로3가", "종로5가", "청량리"];
...
var target = document.getElementById("select_station");
if(selected_value == "line1"){
var opt_station = line1;
}
...
target.options.length = 0;
for (i in opt_station) {
var opt = document.createElement("option");
opt.value = opt_station[i];
opt.innerHTML = opt_station[i];
target.appendChild(opt);
}
■ 「document.getElementById("[html에 설정한 ID]")」로 value를 불러옴
■ 「document.createElement("[html에 설정한 ID]")」로 select option을 설정
728x90
'03_Web' 카테고리의 다른 글
| [Django] 업로드한 사진을 화면에 표시하는 방법 (2) | 2025.05.22 |
|---|---|
| [Django] forms에 체크박스 넣는방법 (7) | 2025.05.20 |
| include태그로 html을 html에 끼워넣기 (0) | 2025.04.01 |
| 파이썬 Django 시스템에서 다른 컴퓨터로 접속하는 방법 (0) | 2025.03.01 |
| TemplateDoesNotExist에러 해결 (0) | 2025.02.24 |