-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script><style>
.hided0 {
display: none;
}
</style><title>Document</title>
</head>
<body>
<div class="test"></div><form class="container my-5 form-group">
<p>상품선택</p>
<select id="main" class="form-select0 mt-2">
<option>모자</option>
<option class="shirtsClick">셔츠</option>
<option class="shirtsClick">바지</option>
</select>
<select class="form-select1 mt-2 hided0 disHide">
<option class="shirtsClick1">남방</option>
<option class="shirtsClick2">티셔츠</option>
</select>
</form><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(".form-select0")
.eq(0)
.on("input", function () {
var value = this.value;
if ("셔츠" == value) {
$(".form-select1").removeClass("hided0");
} else if (value == "바지") {
var 템플릿 = `<p>28</p>
<p>30</p>`;
$(".form-select1").removeClass("hided0");
$(".form-select1").html(템플릿);
}
});
</script>
</body></html>
수업중에 html('') 로 내용을 다 제거하고
append(템플릿)으로 내용을 넣었는데
처음에 전부 바꾸려면 그냥 html(템플릿) 해도 될것같아서 써봤는데 적용아 안되네요 왜그런걸까요 ?
- 답변은 로그인 후 가능합니다.