ASP.NET MVC中实现选择特定选项后显示/隐藏下拉列表

步骤1：完善第一个下拉列表的标识 #

先给第一个下拉列表添加id属性，方便JS精准定位元素：

@Html.DropDownList("rptOption", new List<SelectListItem>
      {
          new SelectListItem { Text = "Document Type", Value = "DocTyp" },  
          new SelectListItem { Text = "All Items", Value = "allItems" },
      }, "--Select--", new { id = "rptOption", style = "width:250px; height:40px" })

步骤2：添加联动逻辑代码 #

根据项目是否引入jQuery，选择以下任意一种实现方式：

方案1：原生JavaScript

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    const rptOption = document.getElementById('rptOption');
    const doctypeDiv = document.getElementById('doctype');

    // 监听下拉选项变化
    rptOption.addEventListener('change', function() {
        if (this.value === 'DocTyp') {
            doctypeDiv.hidden = false; // 显示第二个下拉区域
        } else {
            doctypeDiv.hidden = true; // 隐藏第二个下拉区域
        }
    });
});

方案2：jQuery（适合已引入jQuery的项目）

$(document).ready(function() {
    $('#rptOption').on('change', function() {
        if ($(this).val() === 'DocTyp') {
            $('#doctype').removeAttr('hidden');
        } else {
            $('#doctype').attr('hidden', 'hidden');
        }
    });
});

注意事项 #

• 确保第二个下拉列表的后端数据绑定正常：控制器需将数据库查询到的文档类型数据，通过ViewBag.tfl_idoctype或Model传递到视图，否则@Html.DropDownList("tfl_idoctype", null)会生成空的下拉选项。
• JS代码需放在DOM元素加载完成后执行，避免出现元素找不到的报错。

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