如何使用ajax在Wordpress上的模板文件上根据另一个下拉列表的结果填充下拉列表

<select id="list1">
    <!-- 第一个下拉列表的选项 -->
</select>

<select id="list2">
    <!-- 第二个下拉列表的选项将根据第一个列表的选择结果填充 -->
</select>

<div id="result">
    <!-- 用于显示结果的元素 -->
</div>

jQuery(document).ready(function($) {
    $('#list1').change(function() {
        var selectedValue = $(this).val();
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                'action': 'populate_list2',
                'selected_value': selectedValue
            },
            success: function(response) {
                $('#list2').html(response);
            }
        });
    });
});

// 加载前端页面中所需的JavaScript文件
function enqueue_custom_scripts() {
    wp_enqueue_script('custom-scripts', get_template_directory_uri() . '/js/custom-scripts.js', array('jquery'), '1.0', true);
    
    // 将必要的参数传递给JavaScript文件
    wp_localize_script('custom-scripts', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

// 创建Ajax处理函数
function populate_list2() {
    $selected_value = $_POST['selected_value'];

    // 根据第一个下拉列表的选择结果生成第二个下拉列表的内容
    // 将生成的HTML代码返回给前端页面
    echo '<option value="value1">Option 1</option>';
    echo '<option value="value2">Option 2</option>';
    // 其他选项...

    wp_die();
}
add_action('wp_ajax_populate_list2', 'populate_list2');
add_action('wp_ajax_nopriv_populate_list2', 'populate_list2');