javascript - 在 onchange 事件时在 div 标签中显示 Map 值

Question

在我的 JSP 中，我有一个下拉列表来列出所有可用的部门，当客户选择一个部门时，通过 AJAX，我将在下一个下拉列表中显示所有员工的列表。

出于 AJAX 目的，我使用 HahMap<Integer, String>我的响应文件是

<%@ page contentType="text/xml;charset=UTF-8" language="java"%>
<%@ taglib uri="/WEB-INF/struts-tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/struts-tld/struts-bean.tld" prefix="bean" %>
<%@page import="java.util.ArrayList" %>
<response>
     <logic:iterate id="map" name="optionMap">
         <option>
            <optionvalue><bean:write name="map" property="key"/></optionvalue>
            <optionlabel><bean:write name="map" property="value"/></optionlabel>
         </option>
    </logic:iterate>
</response>

我的员工下拉代码是

<html:select property="employeeId" styleId="employeeId" styleClass="combo" onchange="displayEmployeeName(this.value)">
    <html:option value=""><bean:message key="knowledgepro.admin.select"/></html:option>
    <logic:notEmpty name="hlAdmissionForm" property="employees">
        <html:optionsCollection property="employees" label="value" value="key"/>
    </logic:notEmpty>
</html:select>

所以你可以看到下拉列表的值是该员工的 id(HashMap 的键)，标签是他/她的名字(HashMap 的值)。

到目前为止，一切工作正常，但现在的要求是在下一个表格单元格中显示所选的员工姓名 <td> .

您可以在 Employee 下拉列表的代码中看到我正在调用一个 JS 函数

function displayEmployeeName(employeeName) {
    document.getElementById("studentName").innerHTML = employeeName;
}

但是因为我正在通过this.value在 Employee 下拉列表的 onchange 事件中，显示的是 Employee id，而不是 Employee name。那么有人可以告诉我如何获得 HashMap 的值吗？在 onchange 事件中。

Answer 1

您可以使用this.value来获取employeeId，然后在函数中使用您的employee HashMap来询问姓名

function displayEmployeeName(empId) {
    document.getElementById("studentName").innerHTML = myMap[empId];
}

如果您没有全局可用的 map ，请查看 this answer

this.value返回你的id的原因是因为你的映射是“Integer,String”，这意味着映射中的值是employeeName，键是employeeId。但是，在 select onChange-event 中，您将引用 select-element 中的值，您为该值分配了 Employee 的 id。