JavaScript单选联动下拉框时正确获取选中值的实现方案

代码拿不到正确值是几个基础错误叠加导致的：

• 重复ID违反HTML规范：4个下拉框全写了一样的id="SelectDocType"，浏览器默认只会识别DOM树中第一个带该ID的元素，后面同名ID的元素会被直接忽略，所以永远只能拿到第一个下拉框的值
• jQuery选择器语法错误：ID选择器必须加#前缀，原有代码$("SelectDocType")写法不符合规则，根本选不到目标元素
• 基础语法错误：函数关键字拼写错误（funtion正确写法为function），判断条件里的SelectDocType变量从未定义，逻辑运行时会直接抛异常
• 逻辑缺陷：4个下拉框的数据源全部绑定的m.BigDocs，和单选按钮切换不同文档类型的需求不匹配，切换后下拉选项不会对应变化
• 取值逻辑错误：切换下拉选项时没有获取触发事件的当前元素，而是全局查找固定ID的元素，自然拿不到可见下拉框的选中值

1. 修正Razor视图代码 #

移除重复ID，给所有下拉框加统一通用class，每个下拉框配置唯一ID，数据源对应替换为各自类型的文档集合，onchange事件直接把当前触发元素传入JS函数：

<td id="DocTypes1">
    @Html.DropDownListFor(m => m.Doctype, new SelectList(m.BigDocs, "Value", "Text"), new {
      @id = "SelectDocType1",
      @class = "doc-type-select"
    })
</td>
<td id="DocTypes2" style="display:none;">
    @Html.DropDownListFor(m => m.Doctype, new SelectList(m.SmallDocs, "Value", "Text"), new {
      @id = "SelectDocType2",
      @class = "doc-type-select"
    })
</td>
<td id="DocTypes3" style="display:none;">
    @Html.DropDownListFor(m => m.Doctype, new SelectList(m.MediumDocs, "Value", "Text"), new {
      @id = "SelectDocType3",
      @class = "doc-type-select"
    })
</td>
<td id="DocTypes4" style="display:none;">
    @Html.DropDownListFor(m => m.Doctype, new SelectList(m.VerySmallDocs, "Value", "Text"), new {
      @id = "SelectDocType4",
      @class = "doc-type-select"
    })
</td>

*注：默认除第一个大文档下拉框外，其余三个下拉框先加行内样式隐藏，和单选按钮的显隐切换逻辑匹配。

补充：你实现的DocTypeSelect()单选切换函数里，切换显隐时记得把非当前展示的下拉框选中值清空，避免表单提交时把隐藏下拉框的无效值一起传到后端。

2. 修正JS取值逻辑 #

用事件委托统一绑定下拉框change事件，直接从触发事件的当前元素取值，不用全局查找固定ID，同时修正所有语法错误：

// 页面加载完成后绑定事件
$(function() {
  $(document).on("change", ".doc-type-select", function() {
    // 直接从当前触发事件的下拉框取值
    var docId = $(this).val();
    var docType = $(this).find("option:selected").text();
    if(docId != "") {
      // 这里写后续表格渲染逻辑，docId和docType就是当前选中的有效值
      console.log("选中文档ID：", docId, "选中文档类型：", docType);
    }
  })
})

这种写法不需要在Razor元素上加内联onchange属性，后续哪怕动态新增同类型下拉框也能自动绑定事件，不用重复修改代码。

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