[JavaScript]form 응용하기
콤보박스
1.상품 콤보박스에서 셔츠를 선택하면 사이즈 콤보박스가 나타나게 만든다.
![](https://www.saichoiblog.com/wp-content/uploads/2021/11/스크린샷-2021-11-30-오전-11.03.03.png)
html
<form class="container my-5">
<div class="form-group">
<p>상품선택</p>
<select class="form-control" id="option1">
<option>모자</option>
<option>셔츠</option>
</select>
<div class="size-select">
<p class="mt-4">사이즈선택</p>
<select class="form-control" id="option2">
<option>95</option>
<option>100</option>
<option>105</option>
</select>
</div>
</div>
</form>
css
.size-select{
display: none;
}
js
$("#option1").on("change",function(){
if($("#option1").val() == "셔츠"){
$(".size-select").show();
}else {
$(".size-select").hide();
}
});
2.상품 콤보박스에서 바지를 클릭하면 사이즈가 부분이 변경된다.
html
<form class="container my-5">
<div class="form-group">
<p>상품선택</p>
<select class="form-control" id="option1">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<div class="size-select">
<p class="mt-4">사이즈선택</p>
<select class="form-control" id="option2">
</select>
</div>
</div>
</form>
js
$("#option1").on("change",function(){
var 셔츠 = [95,100,105];
var 바지 = [28,39,32];
if($("#option1").val() == "셔츠"){
$("#option2").empty();
var template = `<option>95</option>
<option>100</option>
<option>105</option>`;
$("#option2").append(template);
$(".size-select").show();
}else if($("#option1").val() == "바지"){
var template = `<option>28</option>
<option>30</option>
<option>32</option>`;
$("#option2").append(template);
$(".size-select").show();
}elseP
$(".size-select").hide();
});
3.반복문으로 상품 사이즈를 동적으로 만드는 방법
js
var 셔츠 = [95,100,105,110];
var 바지 = [28,39,32,34,36];
$("#option1").on("change",function(){
if($("#option1").val() == "셔츠"){
$("#option2").empty();
for(var i = 0; i < 셔츠.length; i++){
var template = `<option>${셔츠[i]}</option>`;
$("#option2").append(template);
}
$(".size-select").show();
}else if($("#option1").val() == "바지"){
$("#option2").empty();
for(var i = 0; i < 바지.length; i++){
var template = `<option>${바지[i]}</option>`;
$("#option2").append(template);
}
$(".size-select").show();
}else{
$(".size-select").hide();
}
});
4.forEach문으로 상품 사이즈 동적으로 만드는 방법
js
var 셔츠 = [95,100,105,110];
var 바지 = [28,39,32,34,36];
$("#option1").on("change",function(){
if($("#option1").val() == "셔츠"){
$("#option2").empty();
셔츠.forEach(function(i){
var template = `<option>${i}</option>`;
$("#option2").append(template);
$(".size-select").show();
});
}else if($("#option1").val() == "바지"){
$("#option2").empty();
바지.forEach(function(i){
var template = `<option>${i}</option>`;
$("#option2").append(template);
$(".size-select").show();
});
}else{
$(".size-select").hide();
}
});
form 관련 이벤트 리스너
change : 값을 변경하고 포커스를 이동하면 발동하는 이벤트
input : 값이 변경되면 발동하는 이벤트
예제
$("input").on("input",function(){
alert("changed!");
});
$("input").on("change",function(){
alert("changed!");
});