ASP.NET MVC 中使用 AJAX 实现级联下拉列表的动态更新

<table class="table">
    <tr>
        <td style="text-align: center;">
            Item1:
        </td>
        <td colspan="2">
            @Html.DropDownListFor(model => model.item1, (SelectList)ViewData["item1List"], new { id = "Item1", name = "Item1", @class = "form-control", @style = "min-width: 100%!important;", @required = true })
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">
            Item2:
        </td>
        <td colspan="2">
            @* 初始时 Item2 可以为空或禁用 *@
            @Html.DropDownListFor(model => model.item2, new SelectList(Enumerable.Empty<SelectListItem>()), new { id = "item2", name = "item2", @class = "form-control", disabled = "disabled", @style = "min-width: 100%!important;" })
        </td>
    </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // 页面加载时，确保 Item2 是禁用状态
        $("#item2").prop("disabled", true);

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

            if (selectedItem1Value) { // 确保选中了一个有效值
                // 发送 AJAX 请求到服务器
                $.ajax({
                    url: "@Url.Action("GetItem2List", "YourController")", // 替换为你的控制器和Action名称
                    type: "GET", // 请求类型，通常为 GET
                    data: { item1Value: selectedItem1Value }, // 将 Item1 的值作为参数传递
                    success: function (data) {
                        // 请求成功回调
                        var items = '';
                        $("#item2").empty(); // 清空 Item2 下拉列表的所有现有选项

                        // 遍历服务器返回的数据，构建新的 <option> 标签
                        $.each(data, function (i, item) {
                            // 注意：服务器返回的 SelectListItem 对象的属性名是 Value 和 Text
                            items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
                        });

                        $('#item2').html(items); // 将新选项添加到 Item2
                        $("#item2").prop("disabled", false); // 启用 Item2 下拉列表
                    },
                    error: function (xhr, status, error) {
                        // 请求失败回调
                        alert("加载 Item2 数据时发生错误：" + status + " - " + error);
                        console.error("AJAX Error:", xhr.responseText);
                        $("#item2").empty(); // 清空 Item2
                        $("#item2").prop("disabled", true); // 禁用 Item2
                    }
                });
            } else {
                // 如果 Item1 没有选中任何值（例如，选择了“请选择”选项），则清空并禁用 Item2
                $("#item2").empty();
                $("#item2").prop("disabled", true);
            }
        });
    });
</script>

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

namespace YourNamespace.Controllers
{
    public class YourController : Controller // 替换为你的控制器名称
    {
        // GET: /YourController/GetItem2List
        public ActionResult GetItem2List(string item1Value)
        {
            // 这是一个示例数据源，实际应用中应从数据库、服务或其他数据存储中获取数据
            List<SelectListItem> item2Options = new List<SelectListItem>();

            if (!string.IsNullOrEmpty(item1Value))
            {
                // 根据 item1Value 的不同，返回不同的 Item2 选项
                switch (item1Value)
                {
                    case "Locomotive": // 假设 Item1 选中了 "Locomotive"
                        item2Options.Add(new SelectListItem { Value = "PassengerCar_A", Text = "客车A" });
                        item2Options.Add(new SelectListItem { Value = "PassengerCar_B", Text = "客车B" });
                        break;
                    case "MotorTrain": // 假设 Item1 选中了 "MotorTrain"
                        item2Options.Add(new SelectListItem { Value = "StadlerFLIRT_Compatible_X", Text = "兼容动车X" });
                        item2Options.Add(new SelectListItem { Value = "StadlerFLIRT_Compatible_Y", Text = "兼容动车Y" });
                        break;
                    // 可以添加更多的 case 来处理不同的 Item1 选项
                    default:
                        // 默认情况或未匹配到任何选项时
                        item2Options.Add(new SelectListItem { Value = "", Text = "请选择" });
                        break;
                }

                // 实际应用中，你可能会从数据库查询：
                // var dataFromDb = _yourService.GetCompatibleItems(item1Value);
                // item2Options = dataFromDb.Select(x => new SelectListItem { Value = x.Id.ToString(), Text = x.Name }).ToList();
            }
            else
            {
                // 如果 item1Value 为空，可以返回一个默认的空选项
                item2Options.Add(new SelectListItem { Value = "", Text = "请先选择Item1" });
            }

            // 返回 JSON 格式的数据。JsonRequestBehavior.AllowGet 是为了允许 GET 请求访问此 Action。
            return Json(item2Options, JsonRequestBehavior.AllowGet);
        }
    }
}