원하시는 내용에 맞는지 모르겠지만 참고만 해보시겠어요?

<select id="primary-category" name="primary-category">
    <option value="">선택하세요</option>
    <option value="사과">사과</option>
    <option value="오렌지">오렌지</option>
</select>

<select id="secondary-category" name="secondary-category" style="display:none;">
    <option value="">선택하세요</option>
</select>
 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        var secondaryOptions = {
            '사과': ['빨간색', '녹색', '황금색'],
            '오렌지': ['빨간색', '노란색', '주황색']
        };

        $('#primary-category').change(function() {
            var selectedCategory = $(this).val();
            var $secondaryCategory = $('#secondary-category');

            if (selectedCategory) {
                var options = secondaryOptions[selectedCategory];
                $secondaryCategory.empty().append('<option value="">선택하세요</option>');
                
                $.each(options, function(index, value) {
                    $secondaryCategory.append('<option value="' + value + '">' + value + '</option>');
                });

                $secondaryCategory.show();
            } else {
                $secondaryCategory.hide().empty();
            }
        });
    });
</script>