Ajax生成下拉选择框,曾经的代码系列——AJAX和JSON生成下拉列表框

Ajax and Json

varxhr;

window.οnlοad= function() {

xhr= newXMLHttpRequest();

GetDataByAjax();

showMsg();

}functionshowMsg() {

document.getElementById("msgDiv").style.display = "block";

document.getElementById("msgImg").src = "Images/load.gif";

}functionGetDataByAjax() {

xhr.open("GET", "GetGradeClassInfo.aspx?isAjax=1", true);

xhr.setRequestHeader("If-Modified-Since", "0"); //不使用缓存

xhr.onreadystatechange =watching;

xhr.send(null);

}//存储服务器返回的年级/班级信息

varjsonResult;functionwatching() {if (xhr.readyState==4) {if (xhr.status==200) {var resStr =xhr.responseText;

jsonResult= eval("(" + resStr + ")");

AddGradesToSelectControl(jsonResult.grades);

AddClassesToSelectControl(jsonResult.grades[0].id);

document.getElementById("msgDiv").style.display = "none";

}else{

alert("服务器错误"+xhr.status);

}

}

}//将包含年级信息的数组--->生成年级下拉列表选项

functionAddGradesToSelectControl(gradeArr) {var selGrades = document.getElementById("grades");for (var i = 0; i < gradeArr.length; i++) {var option = newOption(gradeArr[i].name, gradeArr[i].id);

selGrades.options.add(option);

}

}//将包含班级信息的数组--->生成班级下拉列表选项

functionAddClassesToSelectControl(gradeId) {var selClasses = document.getElementById("classes");

ClearSel(selClasses);for (var i = 0; i < jsonResult.classes.length; i++) {if (gradeId ==jsonResult.classes[i].cgId) {var option = newOption(jsonResult.classes[i].name, jsonResult.classes[i].id);

selClasses.options.add(option);

}

}

}//清空下拉列表框

functionClearSel(selObj) {for (var i = selObj.options.length - 1; i > -1; i--) {

selObj.options[i]= null;

}

}