Gravity form category select field value was render as ID instead of name.

functions.php

<?php
// Step #1:
// In this case the problem was i have a category/ taxonomy select field in gravity form and its value was id where as my requirement was use name. So i firstly use `gform_pre_render` filter hook to change the options value with name. My select field ID was 38.
add_filter( 'gform_pre_render', 'modify_select_field_options' );
function modify_select_field_options( $form ) {
    foreach ( $form['fields'] as &$field ) {
        if ( $field->type === 'select' && $field->id === 38 ) {
            $categories = get_terms( array(
                'taxonomy'   => 'services-category',
                'hide_empty' => false,
            ) );

            // Generate the new options array
            $new_options = array();
            foreach ( $categories as $category ) {
                $new_options[] = array(
                    'text'  => $category->name,
                    'value' => $category->name,
                );
            }

            // Update the option values of the select field
            $field->choices = $new_options;
            break;
        }
    }

    return $form;
}

// Step #2:
// My secodn requirements was populate next select field based on previous one I mean sub-category. So i use jquery ajax call and handle the situation with below.
add_action('wp_ajax_selectHandler', 'selectHandler');
add_action('wp_ajax_nopriv_selectHandler', 'selectHandler');

function selectHandler() {
    $categoryID = $_POST['categoryId'];
    $args = array(
        'post_type'      => 'services',
        'posts_per_page' => -1,
        'tax_query'      => array(
            array(
                'taxonomy' => 'services-category',
                'field'    => 'name',
                'terms'    => $categoryID,
            ),
        ),
    );

    $query = new WP_Query($args);
    $posts = array();

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();

            $post_id = get_the_ID();
            $post_title = get_the_title();

            $post_data = array(
                'id'   => $post_id,
                'name' => $post_title,
            );

            $posts[] = $post_data;
        }
        wp_reset_postdata();
    }

    $response = array(
        'products' => $posts,
    );

    wp_send_json($response);

    wp_die();
}

index.html

<!-- This is just for a demostration purpose html code which i the final output -->
<div>
    <div id="field_1_38"
        class="gfield gfield--width-half form-control category-dropdown gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
        <label class="gfield_label" for="input_1_38">Choose Service Category: <span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
        <div class="ginput_container ginput_container_select">
            <select name="input_38" id="input_1_38" class="large gfield_select" aria-required="true" aria-invalid="false"
                data-gtm-form-interact-field-id="5">
                <option value="" selected="selected" class="gf_placeholder"> Select category </option>option
                <option value="Business">Business</option>
                <option value="Immigration">Immigration</option>
                <option value="Study">Study</option>
                <option value="Travel">Travel</option>
                <option value="Work">Work</option>
            </select>
        </div>
    </div>

    <div id="field_1_39"
        class="gfield gfield--width-half form-control selected-category field_sublabel_below field_description_below gfield_visibility_visible">
        <label class="gfield_label" for="input_1_39">Choose Service Sub-Category:</label>
        <div class="ginput_container ginput_container_select">
            <select name="input_39" id="input_1_39" class="large gfield_select" aria-invalid="false"
                data-gtm-form-interact-field-id="6">
                <option value="">Select a product</option>
                <option value="Parents Super Visa">Parents Super Visa</option>
                <option value="Canada Visitor Visa Guide">
                    Canada Visitor Visa Guide
                </option>
            </select>
        </div>
    </div>
</div>

index.js

// Step #3
// This code I am getting the select value and send it to php end and create my own sub-category select with the success response
$('body').on('change', '.category-dropdown select', function() {
        var categoryId = $(this).val();
        console.log(categoryId);
        $.ajax({
            url: ajaxObj.ajax_url,
            type: 'POST',
            data: { categoryId: categoryId, action: 'selectHandler' },
            dataType: 'json',
    
            success: function(response) {
                console.log(response);
                var products = response.products;
    
                // Clear the options before appending new options
                $('.selected-category select').find('option').remove();
    
                $('.selected-category select').append('<option value="">Select a product</option>');
    
                $.each(products, function(index, product) {
                    console.log(product);
                    $('.selected-category select').append('<option value="' + product.name + '">' + product.name + '</option>');
                });
            },
            error: function() {
                console.log('Error occurred while retrieving products.');
            }
        });
    });