안녕하세요, 선생님 강의는 재밌게 잘 듣고 있습니다.
저는 자바스크립트로 진행하고 있는데요,
append가 적용되지 않아서 게시판을 사용해보니 insertAdjacentHTML을 사용하라고 하시더라구요.
그래서 처음에 insertAdjacentHTML를 사용했습니다.
첫번째 속성은 다른거는 적용이 안되고 beforeend만 적용이 되었지만 바지를 눌렀을때 제대로 된거 같았습니다.
기쁨도 잠시 혹시나하고 바지를 누르고 셔츠를 누른후 바지를 다시 누르니
셔츠에 옵션이 그대로 바지에 추가가 되더라구요.
어떻게 해야하지 하다가 고심끝에
그래서 선생님이 말한거처럼 갈아치우는게 좋겠다해서
innerHTML을 사용했더니
pants array자료의 가장 끝인 34만 나오고 , 나머지가 나오지 않네요 ㅠㅠ
조금 오랜기간 고민하다가 너무 궁굼해서 질문을 남겨봅니다.
제가 놓친 부분있으면 다 말씀해주세요.
감사합니다.
____________________________________________
-HTML
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2" id="city">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<select class="form-select mt-2 hidden"></select>
</form>
_____________________________________________________________
-CSS
.hidden {
visibility: hidden;
opacity: 0;
}
.show {
visibility: visible;
opacity: 1;
}
_____________________________________________________________
- JS
1. 처음 시도했던 방법
const formSelect = document.querySelectorAll(".form-select");
let pants = [28, 30, 32, 34];
formSelect[0].addEventListener("input", () => {
console.log(formSelect[0].value);
if (formSelect[0].value == "셔츠") {
formSelect[1].classList.remove("hidden");
let a = `<option>95</option><option>90</option>`;
formSelect[1].innerHTML = a;
} else if (formSelect[0].value == "바지") {
formSelect[1].classList.remove("hidden");
pants.forEach((a) => {
formSelect[1].insertAdjacentHTML("beforeend", `<option>${a}</option>`);
});
} else {
formSelect[1].classList.add("hidden");
}
});
2. 두번째 시도했던 방법
const formSelect = document.querySelectorAll(".form-select");
let pants = [28, 30, 32, 34];
formSelect[0].addEventListener("input", () => {
console.log(formSelect[0].value);
if (formSelect[0].value == "셔츠") {
formSelect[1].classList.remove("hidden");
let a = `<option>95</option><option>90</option>`;
formSelect[1].innerHTML = a;
} else if (formSelect[0].value == "바지") {
formSelect[1].classList.remove("hidden");
pants.forEach((a) => {
formSelect[1].innerHTML = `<option>${a}</option>`;
});
} else {
formSelect[1].classList.add("hidden");
}
});
