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

@model YourNamespace.YourViewModel // 假设你的模型

<table class="table">
    <tr>
        <td style="text-align: center;">
            item1:
        </td>
        <td colspan="2">
            @Html.DropDownListFor(model => model.item1, (SelectList)ViewData["item1List"], 
                htmlAttributes: new { 
                    id = "Item1", // 关键：用于jQuery选择器
                    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">
            @Html.DropDownListFor(model => model.item2, new SelectList(Enumerable.Empty<SelectListItem>()), // 初始为空或默认选项
                htmlAttributes: new { 
                    id = "item2", // 关键：用于jQuery选择器
                    name = "item2", 
                    disabled = "disabled", // 初始禁用，待item1选择后启用
                    @class = "form-control", 
                    @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 () {
        // 页面加载时，如果item1有默认值，可以触发一次change事件来初始化item2
        // 或者确保item2在后端初始化时已经根据item1的默认值填充
        // if ($("#Item1").val()) {
        //     $("#Item1").trigger('change');
        // }

        $("#Item1").change(function () {
            var selectedItem1Value = $(this).val(); // 获取Item1当前选中的值

            if (selectedItem1Value) { // 只有当Item1有选中值时才发送AJAX请求
                $.ajax({
                    url: "@Url.Action("GetItemList2", "YourControllerName")", // 替换为你的控制器名和Action名
                    type: "GET",
                    data: { item1Value: selectedItem1Value }, // 将Item1的值作为参数传递
                    dataType: "json", // 预期服务器返回JSON数据
                    success: function (data) {
                        var items = '';
                        $("#item2").empty(); // 清空item2当前所有选项

                        if (data && data.length > 0) {
                            // 添加一个默认的提示选项，例如“请选择”
                            items += "<option value=''>-- 请选择Item2 --</option>";
                            $.each(data, function (i, item) {
                                // 假设后端返回的数据结构为 { value: "...", text: "..." }
                                items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
                            });
                            $('#item2').html(items); // 填充新的选项
                            $('#item2').prop('disabled', false); // 启用item2
                        } else {
                            items += "<option value=''>-- 暂无可选Item2 --</option>";
                            $('#item2').html(items);
                            $('#item2').prop('disabled', true); // 禁用item2
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("获取Item2数据时发生错误：" + textStatus + " - " + errorThrown);
                        $('#item2').empty().append("<option value=''>-- 加载失败 --</option>");
                        $('#item2').prop('disabled', true);
                    }
                });
            } else {
                // 如果Item1没有选中值，则清空并禁用Item2
                $('#item2').empty().append("<option value=''>-- 请先选择Item1 --</option>");
                $('#item2').prop('disabled', true);
            }
        });
    });
</script>

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

namespace YourNamespace.Controllers
{
    public class YourControllerNameController : Controller // 替换为你的控制器名
    {
        // 假设有一个方法用于获取数据
        private List<SelectListItem> GetItem2Data(string item1Value)
        {
            // 这里是根据item1Value获取item2数据的逻辑
            // 示例数据：
            if (item1Value == "Locomotive") // 如果Item1选择了“机车”
            {
                return new List<SelectListItem>
                {
                    new SelectListItem { Value = "PassengerCar1", Text = "客车A" },
                    new SelectListItem { Value = "PassengerCar2", Text = "客车B" },
                    new SelectListItem { Value = "PassengerCar3", Text = "客车C" }
                };
            }
            else if (item1Value == "MotorTrain") // 如果Item1选择了“动车组”
            {
                return new List<SelectListItem>
                {
                    new SelectListItem { Value = "StadlerFLIRT", Text = "Stadler FLIRT" },
                    new SelectListItem { Value = "CRH380A", Text = "CRH380A" },
                    new SelectListItem { Value = "CRH2A", Text = "CRH2A" }
                };
            }
            // 更多条件...
            return new List<SelectListItem>(); // 默认返回空列表
        }

        [HttpGet] // 明确指定为GET请求
        public ActionResult GetItemList2(string item1Value)
        {
            // 调用私有方法获取数据
            List<SelectListItem> item2List = GetItem2Data(item1Value);

            // 返回JSON格式数据
            // JsonRequestBehavior.AllowGet 是为了允许GET请求返回JSON数据，防止JSON劫持
            return Json(item2List, JsonRequestBehavior.AllowGet);
        }
    }
}