Question

我有一个非常简单的Ajax测试。在我的JSP上有2个下拉列表： Location 和 Department 。当用户更改位置时，我会使用Ajax相应地过滤部门下拉列表。

该代码适用于Chrome。但是对于IE， Department 下拉列表不会显示数据，而是显示空白。很奇怪。

我检查了responseText属性，它在Chrome和IE中都返回了正确的数据。

当我选择＆＃34;总公司＆＃34;在 Location 下拉列表中，来自Ajax的responseText是

<option value=""></option><option value="1">Sales</option><option
value="2">Support</option>

当我选择＆＃34;区域办事处＆＃34;在 Location 下拉列表中，来自Ajax的responseText是

<option value=""></option><option value="1">Sales</option>

然而Chrome在部门下拉列表中正确显示，IE根本不显示。怎么会？

这是我的代码：

我有2个课程位置和部门：

public class Location implements Serializable {
    private int id;
    private String description;
    public int getId() { return id; }
    public void setId(int id) { this.id = id; }
    public String getDescription() { return description; }
    public void setDescription(String description) { this.description = description; }

    @Override
    public String toString() {
        return "Location [id=" + id + ", description=" + description + "]";
    }
}

public class Department implements Serializable {
    private int id;
    private String description;
    public int getId() { return id; }
    public void setId(int id) { this.id = id; }
    public String getDescription() { return description; }
    public void setDescription(String description) { this.description = description; }

    @Override
    public String toString() {
        return "Department [id=" + id + ", description=" + description + "]";
    }
}

这是我的JSP LocationDepartment.jsp ：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function locationChanged() {
    var newLocation = document.getElementById("select_location").value; 
    var ajaxCallObject = getAjaxCallObject();
    ajaxCallObject.onreadystatechange=function() {
        if (ajaxCallObject.readyState==4) {
            if (ajaxCallObject.status==200) {
                alert("success of ajaxCallObject");
                document.getElementById("select_department").innerHTML = ajaxCallObject.responseText;
            } else {
                alert("failure of ajaxCallObject");
                document.getElementById("select_department").innerHTML = "";
            }
        }
    }

    ajaxCallObject.open("GET", "DepartmentServlet?location=" + newLocation, true);
    ajaxCallObject.send(null);  
}

function getAjaxCallObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('Microsoft.XMLHTTP');
    }
}
</script>
</head>
<body>
<form action="">
<table>
    <tr>
        <td>Location</td>
        <td>
        <select id="select_location" onchange="locationChanged();">
            <option></option>
            <option value="1">Head Office</option>
            <option value="2">Regional Office</option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Department</td>
        <td>
        <select id="select_department">
        </select>
        </td>
    </tr>   
</table>
</form>
</body>
</html>

这是我的servlet DepartmentServlet ：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String parmLocation = null;
    Integer locationCode = null;
    List<Department> departmentList = null;
    Department department = null;
    StringBuffer sb = null;


    parmLocation = request.getParameter("location");

    try {
        locationCode = Integer.parseInt(parmLocation);
    } catch (Exception e) {
        locationCode = null;
    }

    // Head Office
    if (locationCode != null && locationCode == 1) {

        departmentList = new ArrayList<Department>();

        department = new Department();
        department.setId(1);
        department.setDescription("Sales");
        departmentList.add(department);

        department = new Department();
        department.setId(2);
        department.setDescription("Support");
        departmentList.add(department);

    // Regional Office
    } else if (locationCode != null && locationCode == 2) {

        departmentList = new ArrayList<Department>();

        department = new Department();
        department.setId(1);
        department.setDescription("Sales");
        departmentList.add(department);

    }

    sb = new StringBuffer();
    sb.append("<option value=\"\"></option>");      
    if (departmentList != null) {
        for (Department departmen : departmentList) {
            sb.append("<option value=\"" + departmen.getId() + "\">");
            sb.append(departmen.getDescription());
            sb.append("</option>");
        }
    }       

    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Pragma", "no-cache");

    PrintWriter out = response.getWriter();
    out.write(sb.toString());
}

请帮忙。感谢

Answer 1

抱歉，我迟到了。测试此代码。让我知道是否适合你。

＆＃13;

setTimeout(function(){
alert($('select').html());
$('select').html('<option>Value</option>');
}, 1000)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
    <option>Original</option>
</select>

＆＃13;

对于Ajax调用，为什么innerHTML没有在IE中显示？

1 个答案: