无法从动态生成的JavaScript下拉菜单获取选中值求助

问题场景 #

下拉菜单HTML结构 #

<div class="dropdown">
<button class="btn btn-outline-dark dropdown-toggle" type="button" id="DataVersionDropDownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dataset Version
</button> 
<div class="dropdown-menu" id="DataVersionDDMenu" aria-labelledby="dropdownMenuButton">    
</div>

动态生成选项的JS代码 #

var datadirnames = ["NewData", "OldData", "EvenOlderData"];
for (var i = 0; i < datadirnames.length; i++) {
    var opt = datadirnames[i];
    var el = document.createElement("a");
    el.classList = "dropdown-item";
    el.href = "#";
    el.textContent = opt;
    el.value = opt;
    document.querySelector(".dropdown-menu").appendChild(el);
}

点击事件处理代码（存在问题） #

$("#DataVersionDDMenu").click(function() {              
    console.log("DropDown selected "); 
    var e = document.getElementById("DataVersionDDMenu");
    var value = e.options[e.selectedIndex].value;                  

    $.ajax({
        type: 'POST',                   
        url: '@Url.Action("Volumes", "DataVersionSelect", new{id = 1, com="volumes"})',
        data: { "value": $("#DataVersionDDMenu").val() },
        success: function (data){
           console.log("data is " + data);
        }
    });
});

控制台错误信息 #

DropDown selected
Uncaught TypeError TypeError: Cannot read properties of null (reading 'options')

问题根源与解决方法 #

错误原因 #

你用的是Bootstrap的链接式下拉菜单（以<a>作为选项载体），不是传统<select>标签的下拉框，所以e.options这种写法完全不适用——<div class="dropdown-menu">根本没有options属性，这就是报错的直接原因。另外，你把事件绑定到了下拉菜单容器上，点击容器空白区域也会触发事件，逻辑不合理。

修正后的事件处理代码 #

// 绑定点击事件到每个dropdown-item选项，而非容器本身
$("#DataVersionDDMenu").on("click", ".dropdown-item", function(e) {
    e.preventDefault(); // 阻止<a>标签默认跳转行为
    
    // 获取选中项的文本和值
    var selectedText = $(this).text();
    var selectedValue = $(this).attr("value");
    
    // 更新下拉按钮的显示文本
    $("#DataVersionDropDownButton").text(selectedText);
    
    console.log("选中的值：" + selectedValue);
    
    // 发送AJAX请求
    $.ajax({
        type: 'POST',                   
        url: '@Url.Action("Volumes", "DataVersionSelect", new{id = 1, com="volumes"})',
        data: { "value": selectedValue },
        success: function (data){
           console.log("data is " + data);
        }
    });
});

优化建议（可选） #

动态生成选项时，建议用自定义data-*属性代替直接给<a>加value（<a>标签原生不支持value属性，用data属性更规范）：

// 生成选项时替换el.value = opt;为以下代码
el.dataset.value = opt;

然后在事件中获取值：

var selectedValue = $(this).data("value");

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