Select Item in Dropdown When Edit using jQuery

I would like to select the correct item from Dropdown menu when edit using jQuery. This is my current code as of now

<!-- Edit Modal -->
                <div class="modal fade" id="editSubCategoryModal" tabindex="-1" aria-labelledby="editSubModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header bg-light p-3">
                                        <h5 class="modal-title" id="editSubModalLabel">Edit Sub Category</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                            id="close-modal"></button>
                                    </div>
                                    <form id="EditForm">
                                    @csrf
                                        <div class="modal-body">
                                        <input type="hidden" name="subcategoryid_efield" id="subcategoryid_efield">
                                        <div class="mb-3 form-group">
                                                <label for="categoryid_efield" class="form-label">Category Name</label>
                                                <select class="form-select mb-3" aria-label="Default select example" id="categoryid_efield">
                                                </select>
                                            </div>

                                            <div class="mb-3 form-group">
                                                <label for="subcategoryname_efield" class="form-label">Sub Category Name</label>
                                                <input type="text" name="subcategoryname_efield" id="subcategoryname_efield" class="form-control" placeholder="Enter Sub Category Name" />
                                            </div>
</div>
                                        <div class="modal-footer">
                                            <div class="hstack gap-2 justify-content-end">
                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-success" id="edit-btn">Update</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- End Edit Modal -->

<script type="text/javascript">
function editSubCategory(e) {
        let subCategoryId  = e.id;
        let subCategoryName  = e.sub_category_name;
        let selectedCategoryID = e.category_id;

        $("#subcategoryid_efield").val(subCategoryId);
        $("#subcategoryname_efield").val(subCategoryName);

        let url = window.location.origin;
        let path = url + '/getcategories';
        axios.get(path)
        .then( res => {
            $('#categoryid_efield').html('<option value="" disabled>--Select Category--</option>');
                $.each(res.data, function (key, value) {
                    $('#categoryid_efield').append('<option value="' + value.id + '">' + value.category_name + '</option>');
                });
            })
        .catch( err => console.log(err));

        $('#editSubCategoryModal').modal('show');
    }
</script>