我正在尝试生成&；根据用户选择的<select> 选项

我已经在下面发布了我迄今为止的进度，而短代码目前正在表单上被替换POST, 它不支持AJAX—整个页面正在重新加载。我一直试图让这个问题尽可能的笼统，以（希望）帮助其他人，但我对AJAX的经验很少，所以如果能给我提供一些建议，说明我把事情搞砸了，我将不胜感激。

PHP

在实施方面的背景；[table_generator] 是包含窗体和生成的“子”短代码的父短代码。当用户从下拉列表中选择一个提供者并点击提交按钮时，将在下面生成一个短代码，显示与该提供者相关的数据表。如果用户随后在<select> 再次输入并提交，将生成一个新的适当表。

function table_generator() {

    // Set product providers
    $providers = array(
        \'Provider 1\',
        \'Provider 2\',
        \'Provider 3\',
    );

    // Build provider selection form
    $output .= \'<form id="submitProvider" action="" method="POST">\';
    $output .= \'<select name="provider_list">\';
    $output .= \'<option value="default" selected disabled hidden>Select a provider...</option>\';

    // Loop through \'$providers\' array, creating <select> options
    foreach ($providers as $provider) {
        $output .= \'<option value="\' . $provider . \'">\' . $provider . \'</option>\';
    }

    $output .= \'</select>\';
    $output .= \'<button type="submit">Submit</button>\';
    $output .= \'</form>\';

    // Generate shortcode based on selected provider
    if (isset($_POST[\'provider_list\'])) {
        $selected_provider = $_POST[\'provider_list\'];
        $output .= \'<div class="table-container">\';
        $output .= do_shortcode( \'[child-shortcode table="\'. $selected_provider . \'"]\' );
        $output .= \'</div>\';
    }   

    // Initially, only display \'submitProvider\' form
    return $output;

    // AJAX: Generate/update table
    add_action(\'wp_ajax_updateTable\', \'updateTable\');
    add_action(\'wp_ajax_nopriv_updateTable\', \'updateTable\');

    // Return output on POST with updated \'child-shortcode\'
    function updateTable() {
        return $output;   
        die();
    }

}

add_shortcode( \'table_generator\', \'table_generator\' );

JS

$(\'#submitProvider\').submit(function(e){
    $.ajax({ 
        url: ajaxurl,
        type: \'POST\',
        data: {
            action: \'updateTable\', 
        },
        error: function() {
            console.log("Error");            
        },
        success: function(data){ 
            console.log("Success");
        },
    });
});

function table_generator() {
    // Set product providers
    $providers = array(
        \'Provider 1\',
        \'Provider 2\',
        \'Provider 3\',
    );
    // Build provider selection form
    $output .= \'<form id="submitProvider" action="" method="POST">\';
    $output .= \'<select name="provider_list">\';
    $output .= \'<option value="default" selected disabled hidden>Select a provider...</option>\';
    // Loop through \'$providers\' array, creating <select> options
    foreach ($providers as $provider) {
        $output .= \'<option value="\' . $provider . \'">\' . $provider . \'</option>\';
    }
    $output .= \'</select>\';
    $output .= \'<button type="submit">Submit</button>\';
    $output .= \'</form>\';
    return $output;
}
// AJAX: Generate/update table
add_action(\'wp_ajax_updateTable\', \'updateTable\');
add_action(\'wp_ajax_nopriv_updateTable\', \'updateTable\');
// Return output on POST with updated \'child-shortcode\'
function updateTable() {
    if (isset($_POST[\'provider_list\'])) {
        $selected_provider = sanitize_text_field($_POST[\'provider_list\']);
        $output .= \'<div class="table-container">\';
        $output .= do_shortcode( \'[child-shortcode table="\'. $selected_provider . \'"]\' );
        $output .= \'</div>\';
        wp_send_json(array(\'status\' => \'success\', \'html\' => $output));
    }
    wp_send_json(array(\'status\' => \'fail\'));
}
add_shortcode( \'table_generator\', \'table_generator\' );

$(\'#submitProvider\').submit(function(e){
    e.preventDefault();
    $.ajax({ 
        url: ajaxurl,
        type: \'POST\',
        data: {
            \'action\': \'updateTable\',
            \'provider_list\': $("[name=\'provider_list\']").val()
        },
        error: function() {
            console.log("Error");            
        },
        success: function(data){
            if(data.status == \'success\'){
                console.log(data.html);
            }
        },
    });
});