Woocommerce结帐动态选择字段选项基于另一个选择

Question

我正在尝试在woocommerce结帐页面中添加两个选择字段。当用户选择了第一个字段时，应根据用户的选择从数据库中动态填充第二个选择字段。

字段是：

字段1：汽车品牌->由用户选择

字段2：汽车模型->根据字段1中的值从数据库填充

最好的方法是，一旦选择了第一个字段中的值，我将触发ajax函数，但是我无法使其正常工作。

到目前为止，这是我的代码，出现错误：

“ POST https://www.website.com/wp-admin/admin-ajax.php 400”：

// Add checkout custom select fields
add_action( 'woocommerce_after_order_notes', 'add_checkout_custom_fields', 20, 1 );
function add_checkout_custom_fields( $checkout) {
    $domain = 'domain'; // The domain slug

    echo '<h3>'.__( 'Please, select your car make and model:', $domain ).'</h3>';

    //Sql to get Make list
    global $wpdb;

    $make_results = $wpdb->get_results( "SELECT id,title FROM tbl_makes ORDER BY CASE WHEN title= 'Other' THEN 1 ELSE 0 END, title ASC" );
    $makes  = array( '' => __('Car Make') );

    // Loop through the data query results
    foreach($make_results as $make_result) {
        $makes[$make_result->id] = $make_result->title;
    }

    // First Select field (Master)
    woocommerce_form_field( 'car_make', array(
        'type'          => 'select',
        'label'         => __( 'Car Make' , $domain),
        'class'         => array( ' make-field-class form-row-wide' ),
        'input_class'   => array('make-select'),
        'required'      => true,
        'options'       => $makes,
    ),
    $checkout->get_value( 'car_make' ) );


    // Default option value
    $default_option2 = __( 'Car Model', $domain );

    // Dynamic select field options for Javascript/jQuery
    $options = array( '' => $default_option2 );

    // Second Select field (Dynamic Slave)
    woocommerce_form_field( 'car_model', array(
        'type'          => 'select',
        'label'         => __( 'Car Model', $domain ),
        'class'         => array( 'model-field-class form-row-wide' ),
        'input_class'   => array('model-select'),
        'required'       => true,
        'options'       => $options,
    ),
    $checkout->get_value( 'car_model' ) );
}

function add_js_scripts() {
    wp_enqueue_script( 'ajax-script',  get_template_directory_uri() . '/js/my_query.js', array('jquery'), '1.0', true );

    // pass Ajax Url to script.js
    wp_localize_script('ajax-script', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
}
add_action('wp_enqueue_scripts', 'add_js_scripts');

add_action('wp_ajax_get_brand_terms', 'get_models');
add_action('wp_ajax_nopriv_get_brand_terms','get_models');
function get_models() {
    $make_id    = $_POST['mid'];

    global $wpdb;    
    if($make_id != '') {
        $model_results = $wpdb->get_results( "SELECT * FROM tbl_models WHERE make_id = ".$make_id." ORDER BY CASE WHEN title= 'Other' THEN 1 ELSE 0 END, title ASC" );
        $models_arr  = array( '' => __('Car Model') );

        // Loop through the data query results
        foreach($model_results as $model) {
            $models_arr[$model->id] = $model->title;
        }
    }
    //echo "a";
    //echo $models_arr;
    echo json_encode($models_arr );

    wp_die();
}

// jQuery / Ajax (client side)
add_action( 'wp_footer', 'car_brand_selectors_script' );
function car_brand_selectors_script() {
    ?>
    <script type="text/javascript">
    jQuery(function( $ ) {
        if (typeof woocommerce_params === 'undefined')
            return false;

        var b = 'select#car_make', // 1st field
            m = 'select#car_model', // 2nd field
            r = $(m).html(); // Original 2nd field select options

        function ajaxSendCarBrand( id ) {
            $.ajax({
                url: ajax-script.ajaxurl,
                type : 'POST',
                data : {
                    'action' : 'get_brand_terms',
                    'mid' : id
                },
                success: function( response ) {
                    var options = $.parseJSON(response),
                        opt     = '';

                    if ( $.isEmptyObject(options) ) {
                        $(m).html(r);
                    } else {
                        $.each( options, function( key, value ){
                            opt += '<option value="'+key+'">'+value+'</option>';
                        });
                        $(m).html(opt);
                    }
                }
            });
        }

        // On change live event
        $( document.body ).on( 'change', b, function() {
            ajaxSendCarBrand($(this).val());
        });
    });
    </script>
    <?php
}