如何在Chrome中为ComboBox设置选中值与文本（IE迁移问题）

将代码从IE迁移至Chrome后，原有的onClick_ListItem函数无法为ComboBox设置文本和值。

原点击函数代码 #

function onClick_ListItem() {
if (event.srcElement.tagName == "TD") {
    var tempobject = event.srcElement;
    while (tempobject.tagName != "DIV") {
        tempobject = tempobject.parentElement;
    }
    var tempstr = tempobject.id.substring(0, tempobject.id.lastIndexOf('_') + 1);
    eval("document.all." + tempstr + "InputText").value = event.srcElement.parentElement.text;
    eval("document.all." + tempstr + "SelectedValue").value = event.srcElement.parentElement.value;
    eval("document.all." + tempstr + "ListItem").style.display = "none";
}
}

问题根源 #

原代码依赖大量IE专属特性，Chrome等标准浏览器不支持：

• event.srcElement是IE专属，标准浏览器需用event.target
• parentElement虽部分浏览器支持，标准更推荐parentNode
• document.all是IE专属API，标准浏览器应使用document.getElementById()
• eval存在安全风险且性能低下，应直接通过ID获取元素
• IE的text属性在标准浏览器中对应textContent（兼容更多浏览器）

修改后的兼容函数 #

function onClick_ListItem(event) {
    // 兼容IE的event对象
    event = event || window.event;
    var target = event.target || event.srcElement;
    
    // 统一转为大写避免大小写问题
    if (target.tagName.toUpperCase() == "TD") {
        var tempobject = target;
        while (tempobject.tagName.toUpperCase() != "DIV") {
            tempobject = tempobject.parentNode;
        }
        var tempstr = tempobject.id.substring(0, tempobject.id.lastIndexOf('_') + 1);
        
        // 用标准方式获取元素，替换document.all和eval
        var inputText = document.getElementById(tempstr + "InputText");
        var selectedValue = document.getElementById(tempstr + "SelectedValue");
        var listItem = document.getElementById(tempstr + "ListItem");
        
        // 兼容文本获取
        inputText.value = target.parentNode.textContent || target.parentNode.innerText;
        selectedValue.value = target.parentNode.value;
        listItem.style.display = "none";
    }
}

ComboBox.ascx代码 #

<table id="ControlHandle" style="BORDER-RIGHT: #0099cc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #0099cc 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #0099cc 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #0099cc 1px solid"
cellSpacing="0" cellPadding="0" width="300" runat="server">
<tr width="100%">
    <TD><INPUT id="InputText" onblur="onblur_InputText(this)" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none; BACKGROUND-COLOR: #ffffff"
            type="text" maxLength="200" onchange="onchange_InputText()" name="InputText" runat="server"></TD>
    <TD style="BORDER-LEFT: #0099cc 1px solid" onclick="ControlListItem(this)" align="center"
        width="17" bgColor="#c9ddf5"><IMG src="downarrow.gif" align="middle"></TD>
</tr>
<tr>
    <td colSpan="2"><input id="SelectedValue" type="hidden" name="SelectedValue" runat="server"><input id="TempRowIndex" type="hidden" name="TempRowIndex" runat="server"></td>
</tr>
</table>

<div onmousemove="mouseMove_ListItem()" id="ListItem" style="BORDER-RIGHT: #0099cc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: medium none; OVERFLOW-Y: scroll; DISPLAY: none; SCROLLBAR-FACE-COLOR: #c9ddf5; BORDER-LEFT: #0099cc 1px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #0099cc; SCROLLBAR-3DLIGHT-COLOR: #0099cc; SCROLLBAR-ARROW-COLOR: #0099cc; SCROLLBAR-TRACK-COLOR: #f0f8ff; BORDER-BOTTOM: #0099cc 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #f0f8ff; HEIGHT: 100px; BACKGROUND-COLOR: #f4f8ff"
onclick="onClick_ListItem(event)" onmouseout="mouseout_ListItem()" runat="server" onchange="onchange_InputText()" >
<asp:datagrid id="DataGrid_ListItem" runat="server" AutoGenerateColumns="False" Width="100%"></asp:datagrid>
</div>

注：需修改div的onclick事件为onClick_ListItem(event)，确保event对象能传递到函数中。

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