使用Ajax更新两个下拉过滤器的值C# MVC

<select id="filter1">
    <option value="">请选择</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
</select>

<select id="filter2">
    <option value="">请选择</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#filter1').change(function() {
            var selectedValue = $(this).val();
            
            // 发送Ajax请求
            $.ajax({
                url: '/Controller/Action', // 替换为实际的控制器和动作方法
                type: 'POST',
                data: { filter1Value: selectedValue },
                success: function(response) {
                    // 更新filter2的选项
                    $('#filter2').html(response);
                },
                error: function() {
                    alert('请求失败');
                }
            });
        });
    });
</script>

public class Controller : Controller
{
    [HttpPost]
    public ActionResult Action(string filter1Value)
    {
        // 根据filter1的值，获取对应的filter2选项
        var filter2Options = GetFilter2Options(filter1Value);
        
        // 构建filter2选项的HTML代码
        var html = "";
        foreach (var option in filter2Options)
        {
            html += "<option value='" + option.Value + "'>" + option.Text + "</option>";
        }
        
        return Content(html);
    }
    
    private List<SelectListItem> GetFilter2Options(string filter1Value)
    {
        // 根据filter1的值，查询数据库或其他数据源，获取filter2的选项数据
        // 返回一个包含选项值和文本的列表
        // 示例代码：
        var options = new List<SelectListItem>();
        options.Add(new SelectListItem { Value = "option1", Text = "选项1" });
        options.Add(new SelectListItem { Value = "option2", Text = "选项2" });
        return options;
    }
}