select元素绑定onkeyup事件无效，无法获取选中项值

我把普通输入字段改成了select选择列表，想获取选中的名称值，使用onkeyup函数触发逻辑，代码如下：

<select id="sbaa8c08525_name" name="sbaa8c08525[name]" onkeyup="GetDetail(this)" class="" title="Name".....

对应的JavaScript函数：

// onkeyup event will occur when the user 
// release the key and calls the function
// assigned to this event
function GetDetail(str) {

    var e = document.getElementById("sbaa8c08525_vrstaPopisaObveznika");
    var value = e.value;
    var text = e.options[e.selectedIndex].text;
    

    if (str.length == 0) {
        document.getElementById("sbaa8c08525_brojObveznika").value = "";
        document.getElementById("sbaa8c08525_brojSubiekta").value = "";
        return;
    }
    else {

        // Creates a new XMLHttpRequest object
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {

            // Defines a function to be called when
            // the readyState property changes
            if (this.readyState == 4 && 
                    this.status == 200) {
              
                // Typical action to be performed
                // when the document is ready
                var myObj = JSON.parse(this.responseText);

                // Returns the response data as a
                // string and store this array in
                // a variable assign the value 
                // received to the first input field
              
                document.getElementById
                    ("sbaa8c08525_brojObveznika").value = myObj[0];
              
                // Assign the value received to the
                // last input field
                document.getElementById(
                    "sbaa8c08525_brojSubiekta").value = myObj[1];
            }
        };

        alert(str.value); // 输入框输入数字时能弹出内容，但选择列表选值时无输出

        xmlhttp.open("GET", "{{ url("rkp_fetch2") }}?rkp_id=" + str.value, true);
        
        // Sends the request to the server
        xmlhttp.send();
    }
}

现在期望获取列表中选中的名称，但alert(str.value)无任何输出，请问该如何解决？

1. 替换事件类型：onkeyup不适用select元素 #

select元素不会触发onkeyup事件（仅键盘上下键选值时偶发，不通用），需改用onchange事件，当选项切换时自动触发：

<select id="sbaa8c08525_name" name="sbaa8c08525[name]" onchange="GetDetail(this)" class="" title="Name".....

2. 修复空值判断逻辑 #

原代码中str.length == 0是针对input元素的判断，但select的str是DOM对象，没有length属性，需改为判断选中值的长度：

if (str.value.length == 0) {
    document.getElementById("sbaa8c08525_brojObveznika").value = "";
    document.getElementById("sbaa8c08525_brojSubiekta").value = "";
    return;
}

3. 正确获取选中的名称文本 #

如果需要的是选项的显示文本（而非option的value属性），直接通过传入的select元素获取即可：

var selectedText = str.options[str.selectedIndex].text;
alert(selectedText); // 弹出选中的名称

4. 完整修正后的函数示例 #

function GetDetail(str) {
    // 获取当前select的选中值和显示文本
    var selectedValue = str.value;
    var selectedText = str.options[str.selectedIndex].text;

    if (selectedValue.length == 0) {
        document.getElementById("sbaa8c08525_brojObveznika").value = "";
        document.getElementById("sbaa8c08525_brojSubiekta").value = "";
        return;
    }

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            document.getElementById("sbaa8c08525_brojObveznika").value = myObj[0];
            document.getElementById("sbaa8c08525_brojSubiekta").value = myObj[1];
        }
    };

    alert(selectedText); // 现在能正常弹出选中的名称
    // 后端需要value则传selectedValue，需要文本则传selectedText
    xmlhttp.open("GET", "{{ url("rkp_fetch2") }}?rkp_id=" + selectedValue, true);
    xmlhttp.send();
}

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