ASP.NET MVC中利用AJAX实现动态级联下拉列表的教程

@model YourNamespace.YourModel

<table class="table">
    <tr>
        <td style="text-align: center;">
            项目1:
        </td>
        <td colspan="2">
            @Html.DropDownListFor(model => model.item1, (SelectList)ViewData["item1List"], 
                                 htmlAttributes: new { 
                                     id = "Item1", 
                                     name = "Item1", 
                                     @class = "form-control", 
                                     @style = "min-width: 100%!important;", 
                                     @required = true 
                                 })
        </td>
    </tr>
    <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", 
                                     disabled = "disabled", // 初始禁用
                                     @class = "form-control", 
                                     @style = "min-width: 100%!important;" 
                                 })
        </td>
    </tr>
</table>

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

        // 如果选中了有效值，则发起AJAX请求
        if (selectedItem1Value) {
            // 启用 item2 下拉列表
            $("#item2").prop("disabled", false);

            $.ajax({
                url: "@Url.Action("GetItem2List", "YourController")", // 替换为您的控制器名称和Action方法
                type: "GET",
                data: { Item1: selectedItem1Value }, // 将 Item1 的值作为参数发送到服务器
                success: function (data) {
                    var items = '';
                    // 清空 item2 下拉列表的现有选项
                    $("#item2").empty();

                    // 添加一个默认的提示选项，例如“请选择”
                    items += "<option value=''>-- 请选择 --</option>";

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

                    // 将新选项填充到 item2 下拉列表
                    $('#item2').html(items);
                },
                error: function (xhr, status, error) {
                    alert("获取项目2数据时发生错误: " + error);
                    $("#item2").empty().prop("disabled", true); // 错误时清空并禁用
                }
            });
        } else {
            // 如果 Item1 没有选中有效值，则清空并禁用 Item2
            $("#item2").empty().prop("disabled", true);
            $("#item2").append($("<option></option>").val("").html("-- 请选择 --"));
        }
    });

    // 页面加载时，如果 Item1 没有默认选中值，则禁用 Item2
    if (!$("#Item1").val()) {
        $("#item2").prop("disabled", true);
        $("#item2").append($("<option></option>").val("").html("-- 请选择 --"));
    }
});

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc; // 确保引用了System.Web.Mvc

public class YourController : Controller
{
    // 假设您的数据源
    private List<SelectListItem> GetLocomotivePassengerCars()
    {
        return new List<SelectListItem>
        {
            new SelectListItem { Value = "PC001", Text = "客车厢A型" },
            new SelectListItem { Value = "PC002", Text = "客车厢B型" },
            new SelectListItem { Value = "PC003", Text = "餐车厢" }
        };
    }

    private List<SelectListItem> GetCompatibleMotorTrains()
    {
        return new List<SelectListItem>
        {
            new SelectListItem { Value = "MT001", Text = "Stadler FLIRT 2代" },
            new SelectListItem { Value = "MT002", Text = "Stadler KISS" },
            new SelectListItem { Value = "MT003", Text = "Siemens Desiro" }
        };
    }

    /// <summary>
    /// 根据 Item1 的选择获取 Item2 的列表数据
    /// </summary>
    /// <param name="Item1">Item1 的选中值</param>
    /// <returns>返回一个 JSON 格式的 SelectListItem 列表</returns>
    public ActionResult GetItem2List(string Item1)
    {
        List<SelectListItem> item2Data = new List<SelectListItem>();

        if (Item1 == "Locomotive") // 假设 Item1 的值为 "Locomotive" 表示机车
        {
            item2Data = GetLocomotivePassengerCars();
        }
        else if (Item1 == "MotorTrain") // 假设 Item1 的值为 "MotorTrain" 表示动车组
        {
            item2Data = GetCompatibleMotorTrains();
        }
        // 您可以根据实际的 Item1 值添加更多逻辑

        // 返回 JSON 格式的数据
        return Json(item2Data, JsonRequestBehavior.AllowGet);
    }
}