基于另一个DropdownList筛选/切片下拉列表的技术咨询

当然可以直接用JS/JQuery搞定这个DropdownList联动需求！我给你梳理两种最常用的实现方式，还有个实用插件推荐，都是在MVC5项目里验证过的思路。

方案一：前端预存数据（适合数据量小的场景） #

如果你的子选项数据量不大，可以把所有子项数据提前存在页面中，通过前端筛选实现联动，不需要额外的后端请求。

第一步：在View中准备数据 #

首先在你的MVC View里，把关联的子项数据转成JSON格式存起来（比如用隐藏字段）：

<!-- 预存子项数据，假设Model.SubItemsList是包含ParentDescription和子项信息的集合 -->
@Html.Hidden("subItemsData", Json.Encode(Model.SubItemsList))

<!-- 你的第一个下拉框（已有代码） -->
<div class="form-group col-sm-3">
    <label>Nome do cadastro:</label>
    @Html.DropDownListFor(m => m.FinancialItems, new SelectList(Model.FinancialItems, "Description", "Description"), new { @id = "nomeCadastro", @class = "form-control" })
</div>

<!-- 第二个需要联动的下拉框 -->
<div class="form-group col-sm-3">
    <label>Subitem associado:</label>
    @Html.DropDownListFor(m => m.SelectedSubItem, new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "Selecione...", new { @id = "secondDropdown", @class = "form-control" })
</div>

第二步：JS/JQuery实现联动逻辑 #

通过监听第一个下拉框的change事件，筛选预存的子项数据并填充第二个下拉框：

$(document).ready(function() {
    // 解析预存的子项数据
    const allSubItems = JSON.parse($('#subItemsData').val());
    
    // 监听第一个下拉框的选择变化
    $('#nomeCadastro').on('change', function() {
        const selectedParent = $(this).val();
        
        // 筛选出当前父项对应的子项
        const filteredSubItems = allSubItems.filter(item => item.ParentDescription === selectedParent);
        
        // 清空第二个下拉框并添加默认选项
        $('#secondDropdown').empty().append('<option value="">Selecione...</option>');
        
        // 填充筛选后的子项
        filteredSubItems.forEach(item => {
            $('#secondDropdown').append(`<option value="${item.SubItemId}">${item.SubItemDescription}</option>`);
        });
    });

    // 页面加载时如果第一个下拉框有默认值，自动触发联动
    if ($('#nomeCadastro').val()) {
        $('#nomeCadastro').trigger('change');
    }
});

方案二：AJAX异步加载（适合数据量大或动态数据） #

如果子项数据量很大，或者需要从数据库实时获取，推荐用AJAX调用后端接口来获取筛选后的子项。

第一步：后端编写Action #

在你的Controller里添加一个返回JSON的Action，用于根据父项查询子项：

public JsonResult GetSubItemsByParent(string parentDescription)
{
    // 这里替换成你的业务逻辑：根据父项描述查询对应的子项
    var subItems = _yourDataService.GetSubItems(parentDescription);
    
    // 转换成SelectListItem格式，方便前端直接使用
    var result = subItems.Select(s => new SelectListItem
    {
        Value = s.Id.ToString(),
        Text = s.Description
    });
    
    return Json(result, JsonRequestBehavior.AllowGet);
}

第二步：JS/JQuery实现AJAX联动 #

通过AJAX请求后端接口，获取数据后更新第二个下拉框：

$(document).ready(function() {
    $('#nomeCadastro').on('change', function() {
        const selectedParent = $(this).val();
        
        // 发起AJAX请求
        $.ajax({
            url: '@Url.Action("GetSubItemsByParent", "YourControllerName")', // 替换成你的Controller名称
            type: 'GET',
            data: { parentDescription: selectedParent },
            success: function(data) {
                // 清空并填充第二个下拉框
                $('#secondDropdown').empty().append('<option value="">Selecione...</option>');
                $.each(data, function(index, item) {
                    $('#secondDropdown').append(`<option value="${item.Value}">${item.Text}</option>`);
                });
            },
            error: function() {
                alert('Ocorreu um erro ao carregar os subitens.');
            }
        });
    });

    // 页面加载时自动触发（如果有默认值）
    if ($('#nomeCadastro').val()) {
        $('#nomeCadastro').trigger('change');
    }
});

推荐插件：Select2（提升用户体验） #

如果想让下拉框更美观、支持搜索功能，推荐用Select2插件。它不仅能轻松实现联动，还自带很多实用功能，非常适合MVC项目。

基本使用示例 #

初始化Select2后，联动逻辑和AJAX方案类似，只需要调整选项更新的方式：

$(document).ready(function() {
    // 初始化Select2样式
    $('#nomeCadastro').select2({ placeholder: "Selecione um cadastro..." });
    $('#secondDropdown').select2({ placeholder: "Selecione um subitem...", allowClear: true });

    $('#nomeCadastro').on('change', function() {
        const selectedParent = $(this).val();
        
        $.ajax({
            url: '@Url.Action("GetSubItemsByParent", "YourControllerName")',
            type: 'GET',
            data: { parentDescription: selectedParent },
            success: function(data) {
                // 更新Select2的选项
                $('#secondDropdown').empty().select2({
                    data: data,
                    placeholder: "Selecione um subitem...",
                    allowClear: true
                });
            }
        });
    });
});

Select2的优势：

• 支持搜索筛选，适合选项多的场景
• 样式美观，适配Bootstrap（你的项目用了form-control，刚好兼容）
• 自带空值处理和状态提示，用户体验更好

内容的提问来源于stack exchange，提问作者Momentanius