我的网页中有两个下拉列表,其中一个依赖于另一个。我使用的 Ajax 代码在 Chrome、Mozilla 中运行良好,但在 IE 中运行不佳(我使用的是 IE9)。有人可以帮我纠正这个问题吗?
这是 Ajax 代码-
<script language="javascript" type="text/javascript">
var xmlHttp
var xmlHttp
function showSubCategory(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="jsp/subcategory.jsp";
url +="?count=" +str;
xmlHttp.onreadystatechange = stateChange1;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange1(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("subcat").innerHTML=xmlHttp.responseText
}
}
这是下拉列表所在的主 jsp 页面。--
<table>
<tr>
<td align="right" width="10%">Category </td>
<td>
<select id='category' name="adv.categoryNo" onchange="showSubCategory(this.value)">
<option >Select the Category</option>
<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con1 = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","user","pwd");
Statement stmt1 = con1.createStatement();
ResultSet rs1 = stmt1.executeQuery("Select * from categories");
while(rs1.next()){
%>
<option value="<%=rs1.getString(2)%>"><%=rs1.getString(2)%></option>
<%
}
%>
</select>
</td>
</tr>
Second drop down list
<tr>
<td align="right" width="10%">Subcategory <span class="mandatory">*</span>: </td>
<td>
<div id='subcategory'>
<select id='subcat' name='subcategory'>
<option >Select the Subcategory</option>
</select>
</div>
</td>
</tr>
这是 Ajax 调用的子类别 jsp 文件。
<%@page import="java.sql.*"%>
<%
String category=request.getParameter("count");
String buffer="<select name='adv.subCategoryNo'><option >Select the Subcategory</option>";
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","user","pwd");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select * from subcategories where categoryName='"+category+"' ");
while(rs.next()){
buffer=buffer+"<option value='"+rs.getString(3)+"'>"+rs.getString(3)+"</option>";
}
buffer=buffer+"</select>";
response.getWriter().println(buffer);
}
catch(Exception e){
System.out.println(e);
}
%>
奇怪的是,如果我将 Ajax 代码的以下函数中的 getElementById 参数从“subcat”更改为“subcategory”,是覆盖第二个下拉列表的div id,在IE和其他浏览器中工作正常。
function stateChange1(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("subcat").innerHTML=xmlHttp.responseText
}
如果我遵循上述方法,我将无法使用以下 JS 代码对该子类别选择框进行任何 javascript 表单验证。
function madeSelectionCity(){
var subcat = document.getElementById('subcat');
if(subcat.value == "Select the City name"){
alert("Please select a subcategory first");
subcat.focus();
return false;
}else{
return true;
}
}
希望我的问题很清楚。如果需要更多解释,请告诉我。谢谢
最佳答案
更改以下代码行(在 subcategory.jsp 中由 ajax 代码调用)
String buffer="<select name='adv.subCategoryNo'><option >Select the Subcategory</option>";
到
String buffer="<select id='subcat' name='adv.subCategoryNo'><option >Select the Subcategory</option>";
并添加这行代码(在 subcategory.jsp 中由 ajax 代码调用)
response.setContentType("text/html");
在网页(主页)上,html应该是
<div id='subcategory'>
</div>
和ajax(主页)代码应该是
function stateChange1(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("subcategory").innerHTML=xmlHttp.responseText
}
关于javascript - Internet Explorer 中的 Ajax 可靠下拉列表问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10349653/