La copia del código es la siguiente:
<! Doctype html público "-// w3c // dtd html 4.01 transitional // en">
<html>
<Evista>
<title> menu2level.html </title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<script type = "text/javaScript">
función loadxml () {
var xmldoc;
intentar{
//ES DECIR
xmldoc = new ActiveXObject ("Microsoft.xmldom");
} catch (e) {
intentar{
xmldoc = document.implementation.createDocument ("" "," ", nulo);
} catch (e) {
alerta (E.Message);
devolver;
}
}
xmldoc.async = false;
xmldoc.load ("Cities.xml");
return xmlDoc;
}
// La carga de la página web se completa después de la carga, y la provincia se está cargando.
onload = function () {
var xmlDocument = loadxml ();
var provincearr = xmlDocument.getElementsBytagName ("provincia");
var prosize = provincearr.length;
para (var i = 0; i <prosize; i ++) {
// Crear nodo de opción
var optionElement = document.createElement ("opción");
var provinceName = provinceARR [i] .getAttribute ("nombre");
// crear un nodo de texto
var textElement = document.createTextNode (provinceName);
OppectionElement.AppendChild (TextElement);
OppectionElement.SetAttribute ("Valor", ProvinceName);
var nodo = document.getElementById ("provincia");
node.appendChild (opcionElement);
}
}
// evento de cambio de provincia
Cambio de funciones Province (nodo) {
// Obtener marca de esquina seleccionada
Var index = node.selectedIndex;
// Obtener el nombre de la provincia correspondiente
var provinceName = node.options [index] .value;
Loadcities (Provincename);
}
// Cargar información de la ciudad según el número de la provincia
función loadcities (proname) {
var xmlDocument = loadxml ();
var provincearr = xmlDocument.getElementsBytagName ("provincia");
// Obtener elementos de la ciudad
var cityselectele = document.getElementById ("Ciudades");
var size = cityselectele.options.length;
para (var i = size; i> 0; i-) {
CitySelectele.remove (i);
}
// Obtener el número de provincias
var prosize = provincearr.length;
VAR Proelement;
// Obtener el elemento de la provincia correspondiente
para (var i = 0; i <prosize; i ++) {
if (provincearr [i] .getAttribute ("name") == proname) {
proelement = provincearr [i];
romper;
}
}
// Obtener la información de la ciudad de la provincia
var CitySarr = Proelement.getElementsBytagName ("Ciudad");
var len = CICIDYARR.LIGTH;
para (var i = 0; i <len; i ++) {
// Crear nodo de opción
var optionElement = document.createElement ("opción");
// consigue el nombre de la ciudad
var cityName = CICIDYARR [i] .FirstChild.NodeValue;
// crear un nodo de texto
var textElement = document.createTextNode (CityName);
OppectionElement.AppendChild (TextElement);
OppectionElement.SetAttribute ("Valor", CityName);
CitySelectele.AppendChild (OpcionalElement);
}
}
función getValue () {
var pro = document.getElementById ("provincia"). valor;
var city = document.getElementById ("Ciudades"). Valor;
alerta (pro+":"+ciudad);
}
</script>
</ablo>
<Body>
<select id = "provincia" onchange = "ChangeProvince (this)">
<opción valor = "" seleccionado = "seleccionado">-provincia-</opción>
</select>
<select id = "ciudades">
<opción valor = "" seleccionado = "seleccionado">-ciudad-</opción>
</select>
<input type = "button" value = "pop up" onClick = "getValue ()"/>
</body>
</html>
Los efectos son los siguientes:
http://img.blog.csdn.net/20140315235043343?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgl1agvuz2h1atuymde=/5a6l5l2t/fontsii Olve/70/Gravity/Southeast
El archivo Cities.xml es el siguiente:
La copia del código es la siguiente:
<? xml versión = "1.0" encoding = "utf-8"?>
<xml-body>
<provincia name = "Shaanxi">
<city> xi'an </city>
<city> Hanzhong </City>
<city> Baoji </City>
<city> yan'an </city>
</provincia>
<provincia name = "Guangdong">
<city> Foshan </City>
<city> shenzhen </city>
<city> Guangzhou </City>
<city> shantou </city>
</provincia>
<provincia name = "liaoning">
<city> dalian </city>
<city> Tieling </City>
<city> Anshan </city>
<city> fushun </city>
</provincia>
</xml-body>