使用addEventListener获取下拉列表change事件选中值的问题

问题现象 #

尝试获取下拉列表选中值时，首次点击无法拿到正确内容，再次点击才正常：

• 首次点击输出：

You clicked on a SPAN
The innerHTML is
The text is
The parentNode is DIV

• 第二次点击输出：

You clicked on a SPAN
The innerHTML is Active
The text is Active
The parentNode is DIV

将代码中的click事件改为change事件后问题依然存在，当前代码如下：

<script>
    
    function GetdrpSelected(e, param) {
      
        var txt='You clicked on a '+e.target.nodeName+'\n';
        txt+='The innerHTML is '+e.target.innerHTML+'\n';
        txt+='The text is '+e.target.textContent+'\n';
        txt+='The parentNode is '+e.target.parentNode.nodeName+'\n';
        console.log(txt);
        
    }
    
    function attachEventListener(node) {
        const element = node;
        
        element.addEventListener("click", function (evt){
            const elemId = node.childNodes[0].childNodes[0].id;
            GetdrpSelected.call(this, evt, elemId);
                 
        });
    }
    
    function initCat(){
        let wrappers = document.getElementsByClassName("ard-FormField-wrapper");
        for (let i = 0; i < wrappers.length; i++) {
          let formLabel = wrappers[i].childNodes[0];
          if(formLabel.innerHTML !== '' && formLabel.innerHTML.toLowerCase().indexOf('change cat') > -1){
            attachEventListener(wrappers[i].childNodes[1]);
          }
        }
    }
    
    const ddlCat = setTimeout(initCat, 2000);
    
</script>

问题原因 #

1. 事件绑定对象错误：当前给下拉容器绑定click事件，首次点击时下拉选项可能未完成渲染，或事件目标并非最终选中元素，导致内容为空。
2. 原生change事件不适用：这是自定义下拉组件，不是原生<select>，不会触发原生change事件。
3. childNodes获取元素不可靠：childNodes包含文本节点（换行、空格等），直接通过索引取元素容易出错，首次获取的节点可能为空。

解决方案 #

方案1：直接监听下拉选项点击 #

找到下拉选项元素，给每个选项绑定点击事件，确保点击时直接获取选中内容：

function attachEventListener(node) {
    // 替换为实际的下拉选项类名
    const options = node.querySelectorAll(".ard-Dropdown-option");
    options.forEach(option => {
        option.addEventListener("click", function() {
            const selectedText = this.textContent.trim();
            console.log(`选中值：${selectedText}`);
            // 执行你的业务逻辑
        });
    });
}

方案2：利用组件自身选中事件 #

如果是第三方UI组件，通常会提供专属的选中回调，比如：

function attachEventListener(node) {
    // 替换为组件实际的选中事件名
    node.addEventListener("select", function(evt) {
        const selectedValue = evt.detail.value;
        const selectedText = evt.detail.text;
        console.log(`选中值：${selectedValue}，文本：${selectedText}`);
    });
}

方案3：修正现有事件逻辑 #

如果坚持用容器事件，需确保目标是选中元素，并等待渲染完成：

function GetdrpSelected(e) {
    // 替换为实际的选中元素选择器
    const selectedElement = e.target.closest(".ard-Dropdown-selected");
    if (selectedElement) {
        const txt = `You clicked on a ${selectedElement.nodeName}\n` +
                    `The innerHTML is ${selectedElement.innerHTML}\n` +
                    `The text is ${selectedElement.textContent.trim()}\n` +
                    `The parentNode is ${selectedElement.parentNode.nodeName}\n`;
        console.log(txt);
    }
}

function attachEventListener(node) {
    node.addEventListener("click", function(evt) {
        // 延迟执行确保下拉渲染完成
        setTimeout(() => GetdrpSelected(evt), 100);
    });
}

额外优化：替换childNodes为querySelector #

用querySelector替代索引获取元素，避免文本节点干扰：

function initCat(){
    let wrappers = document.querySelectorAll(".ard-FormField-wrapper");
    wrappers.forEach(wrapper => {
        // 替换为实际的标签选择器
        const formLabel = wrapper.querySelector("label");
        if(formLabel && formLabel.textContent.toLowerCase().includes('change cat')){
            // 替换为实际的下拉容器选择器
            const dropdown = wrapper.querySelector(".ard-Dropdown");
            if(dropdown) attachEventListener(dropdown);
        }
    });
}

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