ASP.NET MVC中基于AJAX动态更新下拉列表内容的教程

<!-- 父级下拉列表 Item1 -->
<tr>
    <td style="text-align: center;">
        项目1:
    </td>
    <td colspan="2">
        @Html.DropDownListFor(model => model.item1, (SelectList)ViewData["item1List"], 
            htmlAttributes: new { onchange = "checkItem();", id = "Item1", name = "Item1", @class = "form-control", @style = "min-width: 100%!important;", @required = true })
    </td>
</tr>
<!-- 子级下拉列表 Item2 -->
<tr>
    <td style="text-align: center;">
        项目2:
    </td>
    <td colspan="2">
        @Html.DropDownListFor(model => model.item2, new SelectList(Enumerable.Empty<SelectListItem>()), // 初始为空或默认值
            htmlAttributes: new { id = "item2", name = "item2", @class = "form-control", @style = "min-width: 100%!important;" })
    </td>
</tr>

$(document).ready(function () {
    // 监听 Item1 下拉列表的 change 事件
    $("#Item1").change(function () {
        var selectedItem1Value = $(this).val(); // 获取 Item1 当前选中的值

        // 发起 AJAX 请求
        $.ajax({
            url: "/YourController/getList", // 注意：替换为您的控制器名称和Action名称
            type: "GET",
            data: { Item1: selectedItem1Value }, // 将 Item1 的选中值作为参数发送到服务器
            dataType: "json", // 预期服务器返回的数据类型是JSON
            success: function (data) {
                // 请求成功回调函数
                var items = '';
                $("#item2").empty(); // 清空 Item2 下拉列表的现有选项

                // 遍历服务器返回的数据，构建新的选项
                $.each(data, function (i, item) {
                    items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
                });

                // 将新选项添加到 Item2 下拉列表
                $('#item2').html(items);
                // 如果 Item2 最初是禁用状态，可以在这里启用它
                // $('#item2').prop('disabled', false); 
            },
            error: function (xhr, status, error) {
                // 请求失败回调函数
                alert("加载 Item2 数据时发生错误: " + error);
                console.error("AJAX Error:", status, error, xhr);
            }
        });
    });

    // 页面加载时，如果 Item1 有默认值，可以触发一次change事件来初始化 Item2
    // 或者根据业务逻辑，决定 Item2 的初始状态
    // $("#Item1").trigger("change"); 
});

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

public class YourController : Controller
{
    // 假设您有一些数据源
    private List<SelectListItem> GetAllLocomotiveTypes()
    {
        return new List<SelectListItem>
        {
            new SelectListItem { Value = "DieselLoco", Text = "内燃机车" },
            new SelectListItem { Value = "ElectricLoco", Text = "电力机车" }
        };
    }

    private List<SelectListItem> GetAllMotorTrainTypes()
    {
        return new List<SelectListItem>
        {
            new SelectListItem { Value = "StadlerFLIRT", Text = "Stadler FLIRT" },
            new SelectListItem { Value = "CRH380A", Text = "CRH380A" }
        };
    }

    private List<SelectListItem> GetPassengerCars()
    {
        return new List<SelectListItem>
        {
            new SelectListItem { Value = "HardSeat", Text = "硬座车" },
            new SelectListItem { Value = "SoftSeat", Text = "软座车" },
            new SelectListItem { Value = "Sleeper", Text = "卧铺车" }
        };
    }

    private List<SelectListItem> GetCompatibleMotorTrains(string selectedMotorTrain)
    {
        // 示例逻辑：根据选中的动车组返回兼容的动车组
        if (selectedMotorTrain == "StadlerFLIRT")
        {
            return new List<SelectListItem>
            {
                new SelectListItem { Value = "StadlerKISS", Text = "Stadler KISS" },
                new SelectListItem { Value = "StadlerGTW", Text = "Stadler GTW" }
            };
        }
        else if (selectedMotorTrain == "CRH380A")
        {
            return new List<SelectListItem>
            {
                new SelectListItem { Value = "CRH380B", Text = "CRH380B" },
                new SelectListItem { Value = "CRH380CL", Text = "CRH380CL" }
            };
        }
        return new List<SelectListItem>(); // 默认返回空列表
    }

    // 处理AJAX请求的Action方法
    [HttpGet] // 明确指定为GET请求
    public ActionResult getList(string Item1)
    {
        List<SelectListItem> item2Data = new List<SelectListItem>();

        // 根据 Item1 的值返回不同的 Item2 数据
        if (Item1 == "Locomotive") // 假设 Item1 的值为 "Locomotive" 代表机车
        {
            item2Data = GetPassengerCars(); // 机车后接客车
        }
        else if (Item1 == "MotorTrain") // 假设 Item1 的值为 "MotorTrain" 代表动车组
        {
            // 如果 Item1 选择了动车组，可能需要进一步的用户输入来确定兼容动车组
            // 这里为了简化，我们假设直接返回所有动车组类型，或者根据更复杂的逻辑处理
            item2Data = GetAllMotorTrainTypes(); 
            // 如果需要更精细的兼容性判断，可能需要前端再发送一个请求，或者Item1的值包含更多信息
            // 例如，如果 Item1 的值直接是 "StadlerFLIRT"，则可以调用 GetCompatibleMotorTrains("StadlerFLIRT");
        }
        // 您可以根据实际的 Item1 选项值来扩展这里的逻辑

        // 返回 JSON 格式的数据
        // 注意：SelectListItem 的属性名在序列化后会变成小写，前端JS中要用 item.value 和 item.text
        return Json(item2Data, JsonRequestBehavior.AllowGet);
    }
}