在asp.net mvc中使用jquery ajax的级联下拉列表

<select id="mainDropdown">
    <option value="">请选择主选项</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
</select>

<select id="subDropdown">
    <option value="">请选择级联选项</option>
</select>

$(document).ready(function() {
    $('#mainDropdown').change(function() {
        var selectedOption = $(this).val();
        
        $.ajax({
            url: '/Controller/GetSubOptions',
            type: 'POST',
            data: { mainOption: selectedOption },
            success: function(data) {
                // 清空级联选项列表
                $('#subDropdown').empty();
                
                // 添加级联选项
                $.each(data, function(index, option) {
                    $('#subDropdown').append('<option value="' + option.value + '">' + option.text + '</option>');
                });
            }
        });
    });
});

public ActionResult GetSubOptions(string mainOption)
{
    // 根据主选项获取对应的级联选项数据
    var subOptions = GetSubOptionsFromDatabase(mainOption);
    
    // 将级联选项数据转换为JSON格式并返回
    return Json(subOptions, JsonRequestBehavior.AllowGet);
}