forEach 반복문 관련 질문 드립니다.

안녕하세요. 궁금한 점이 있어 질문드립니다. array에 데이터 담아서 forEach 반복문으로
뽑아 쓰는 부분 배우다가 머리 터질 것 같아서 긴급히 도움 요청드립니다.

코드는 다음과 같습니다.

var pants = [28, 30, 32, 34];
var shirts = [95, 100, 105];
var hats = ['Small', 'Medium', 'Large'];

$('.form-select').eq(0).on('input', function () {
    var value = this.value;

    if (value == '모자') {
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');

        hats.forEach(function (data) {
            $('.form-select').eq(1).append(<option>${data}</option>);
        });
    }
    else if (value == '셔츠') {
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');

        shirts.forEach(function (data) {
            $('.form-select').eq(1).append(<option>${data}</option>);
        });
    }
    else if (value == '바지') {
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');

        pants.forEach(function (data) {
            $('.form-select').eq(1).append(<option>${data}</option>);
        });
    }
});

강의에서 보여주셨던 JS 코드를 조금만 응용해본건데요, select 태그 처음 기본 값이 '모자'입니다.
그런데 문제점은 '모자'를 처음부터 고르면 옵션이 안 뜨고, 다른 '셔츠'나 '바지'를 먼저 고른 뒤 '모자'를
골라야 그제서야 '모자'의 옵션들이 아래에 바로 뜹니다.

어떻게 하면 처음부터 '모자'를 골라도 밑에 옵션들이 바로 뜰까요?
선생님의 도움이 절실합니다. 도와주세요. 감사합니다.