jsp select ajax,jsp页面省市选择-ajax

pageEncoding="UTF-8"%>

String ctx = request.getContextPath();

%>

Get the information of Chinese Cities

-请选择-

-请选择-

-请选择-

window.onload = function() {

var provincesOptionElement = document.getElementById("province");

var citiesOptionElement = document.getElementById("city");

var districtsOptionElement = document.getElementById("district");

//保存option第一个节点

var cityFirstOption = citiesOptionElement.options[0];

var districtFirstOption = districtsOptionElement.options[0];

//加载xml文件

var provincesXmlDoc = parseXML('/res/Provinces.xml');

var citiesXmlDoc = parseXML('/res/Cities.xml');

var districtsXmlDoc = parseXML('/res/Districts.xml');

var xmlProvinceElements = provincesXmlDoc.getElementsByTagName("Province");

var xmlCitiesElements = citiesXmlDoc.getElementsByTagName("City");

var xmlDistrictElements = districtsXmlDoc.getElementsByTagName("District");

for(var i=0; i

var xmlProvinceElement = xmlProvinceElements[i];

var provinceName = xmlProvinceElement.getAttribute("ProvinceName");

var addedProvinceOption = document.createElement("option");

var addedProvinceOptionText = document.createTextNode(provinceName);

addedProvinceOption.appendChild(addedProvinceOptionText);

addedProvinceOption.setAttribute("value", provinceName);

provincesOptionElement.appendChild(addedProvinceOption);

}

provincesOptionElement.onchange = function() {

var isSelect = false;

var provinceName = this.value;

citiesOptionElement.options.length = 0;

districtsOptionElement.options.length = 0;

for(var i=0; i

var xmlProvinceElement = xmlProvinceElements[i];

if(xmlProvinceElement.getAttribute("ProvinceName") == provinceName) {

var xmlProvinceId = xmlProvinceElement.getAttribute("ID");

isSelect = true;

for(var i=0; i

var xmlCitiesElement = xmlCitiesElements[i];

if(xmlCitiesElement.getAttribute("PID") == xmlProvinceId) {

var addedCityOption = document.createElement("option");

var addedCityOptionText = document.createTextNode(xmlCitiesElement.getAttribute("CityName"));

addedCityOption.appendChild(addedCityOptionText);

citiesOptionElement.appendChild(addedCityOption);

}

}

}

}

if(isSelect == false) {

citiesOptionElement.appendChild(cityFirstOption);

}

districtsOptionElement.appendChild(districtFirstOption);

citiesOptionElement.onchange();

}

citiesOptionElement.onchange = function() {

var isSelect = false;

var cityName = this.value;

for(var i=0; i

var xmlCityElement = xmlCitiesElements[i];

if(xmlCityElement.getAttribute("CityName") == cityName) {

var xmlCityId = xmlCityElement.getAttribute("ID");

isSelect = true;

districtsOptionElement.options.length = 0;

for(var i=0; i

var xmlDistrictElement = xmlDistrictElements[i];

if(xmlDistrictElement.getAttribute("CID") == xmlCityId) {

var addedDistrictOption = document.createElement("option");

var addedDistrictOptionText = document.createTextNode(xmlDistrictElement.getAttribute("DistrictName"));

addedDistrictOption.appendChild(addedDistrictOptionText);

districtsOptionElement.appendChild(addedDistrictOption);

}

}

}

}

if(isSelect == false) {

districtsOptionElement.options.length = 0;

districtsOptionElement.appendChild(districtFirstOption);

}

}

}

function parseXML(filename) {

try {//IE

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

} catch (e) {//Firefox, Mozilla, Opera, etc.

try {

xmlDoc = document.implementation.createDocument("", "", null);

} catch (e) {

}

}

//关闭异步加载

xmlDoc.async = false;

//加载xml文档

xmlDoc.load(filename);

return xmlDoc;

}