forEach 반복 횟수 제한

[조현희]

안녕하세요 선생님!
forEach문에 option에 대한 횟수가 정해져 있지 않아서 append를 할 때마다 추가돼서 나오는 것 같은데,
for문이 아닌 forEach를 사용했을 때는 횟수를 제한하는 방법이 없나요?

var pants = [28, 29, 30, 31];
var shirts = [90, 95, 100, 105];

$(".form-select")
  .eq(0)
  .on("input", function () {
    var value = this.value;
    if (value == "모자") {
      // 모자를 고르면
      $(".form-select").eq(1).addClass("form-hide"); // 옵션 1 안보이게
      $(".form-select").eq(2).addClass("form-hide"); // 옵션 2 보이게
    } else if (value == "셔츠") {
      //유저가 셔츠를 고르면
      $(".form-select").eq(1).removeClass("form-hide"); //옵션1 보이게 form-hide를 class이름에서 빼기
      $(".form-select").eq(2).addClass("form-hide"); // 옵션2 안 보이게 form-hide를 class이름에 추가
      shirts.forEach(function (item) {
        $(".form-select").eq(1).append(`<option>${item}</option>`);
        // 옵션 1에 item이 받아온 shirts 데이터 option에 넣어주기
      });
    } else if (value == "바지") {
      //유저가 바지를 고르면
      $(".form-select").eq(1).addClass("form-hide"); // 옵션1 보이게
      $(".form-select").eq(2).removeClass("form-hide"); // 옵션 2 안 보이게
      pants.forEach(function (item) {
        $(".form-select").eq(2).append(`<option>${item}</option>`);
        // 옵션 2에 item이 받아온 pants 데이터 option에 넣어주기
      });
    } 
  });

[codingapple]

뭐 선택하면 기존 <select>내부를 비우고 나서 <option> 추가하라고 코드짜도 될듯요

[조현희]

<form class="container my-5 form-group">
      <p>상품선택</p>
      <select class="form-select mt-2">
        <option>모자</option>
        <option>셔츠</option>
        <option>바지</option>
      </select>
      <select class="form-select mt-2 form-hide">
      </select>
      <select class="form-select mt-2 form-hide">   
      </select>
    </form>

html을 이렇게 짜서 forEach문을 돌 때 option 코드를 추가하도록 짰는데 option 내용이 반복돼서
추가가 되는 문제가 있습니다.
 break 기능을 할 수 있는 코드를 짜보려고 했는데 어려움이 있어 질문드렸습니다.

[codingapple]

forEach는 중간에 중단 불가능합니다 
뭐 선택하면 기존 <option>들은 지우고 새로 추가하라고 코드짭시다

[글쓴이]

글