A cópia do código é a seguinte:
<!
<html>
<head>
<title> menu2level.html </ititle>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<script type = "text/javascript">
função loadxml () {
var xmldoc;
tentar{
// ou seja
xmldoc = new ActiveXObject ("Microsoft.xmldom");
} catch (e) {
tentar{
xmldoc = document.implementation.createCumocument ("", "", null);
} catch (e) {
alerta (e.message);
retornar;
}
}
xmldoc.async = false;
xmldoc.load ("cities.xml");
retornar xmldoc;
}
// O carregamento da página da Web é concluído após o carregamento e a província está carregando.
OnLoad = function () {
var xmldocument = loadxml ();
var Provincearr = xmldocument.getElementsByTagName ("Província");
var prosize = Provincearr.length;
for (var i = 0; i <prosize; i ++) {
// Crie o nó da opção
var optionElement = document.createElement ("option");
var provincename = Provincearr [i] .getAttribute ("nome");
// Crie um nó de texto
var textElement = document.createTextNode (provinceName);
optionElement.appendChild (textElement);
optionElement.SetAttribute ("Value", ProvinceName);
var node = document.getElementById ("Província");
node.appendChild (optionElement);
}
}
// Evento de mudança de província
Função ChangeProvince (nó) {
// recebe marca de canto selecionada
var index = node.SelectedIndex;
// Obtenha o nome da província correspondente
var provinceName = node.options [index] .Value;
loadcities (nome da província);
}
// Carregar informações da cidade de acordo com o número da província
função loadcities (proname) {
var xmldocument = loadxml ();
var Provincearr = xmldocument.getElementsByTagName ("Província");
// Obtenha elementos da cidade
var citySelectEle = document.getElementById ("cidades");
Var size = CitySelectEle.Options.Length;
for (var i = size; i> 0; i-) {
CitySelectEle.Remove (i);
}
// Obtenha o número de províncias
var prosize = Provincearr.length;
var Proelement;
// Obtenha o elemento da província correspondente
for (var i = 0; i <prosize; i ++) {
if (provincearr [i] .getAttribute ("nome") == proname) {
proElement = Provincearr [i];
quebrar;
}
}
// Obtenha as informações da cidade da província
var citiesarr = proElement.getElementsByTagName ("City");
var len = citiesarr.Length;
for (var i = 0; i <len; i ++) {
// Crie o nó da opção
var optionElement = document.createElement ("option");
// Obtenha o nome da cidade
var CityName = Citiesarr [i] .FirstChild.NodEvalue;
// Crie um nó de texto
var textElement = document.createTextNode (CityName);
optionElement.appendChild (textElement);
optionElement.SetAttribute ("Value", CityName);
CitySelectEle.AppendChild (OptionElement);
}
}
function getValue () {
var pro = document.getElementById ("Província").
var cidade = document.getElementById ("cidades").
alerta (pro+":"+cidade);
}
</script>
</head>
<Body>
<select id = "Província" onchange = "ChangeProvince (this)">
<opção value = "" selected = "Selected">-Província-</pption>
</leclect>
<select id = "cidades">
<opção value = "" selected = "Selected">-City-</pption>
</leclect>
<input type = "button" value = "pop up" onclick = "getValue ()"/>
</body>
</html>
Os efeitos são os seguintes:
http://img.blog.csdn.net/20140315235043343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsi ze/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
O arquivo cities.xml é o seguinte:
A cópia do código é a seguinte:
<? xml versão = "1.0" coding = "utf-8"?>
<XML-Body>
<Nome da província = "Shaanxi">
<City> xi'an </ity>
<City> Hanzhong </ity>
<City> Baoji </ity>
<City> Yan'an </ity>
</província>
<Nome da província = "Guangdong">
<City> Foshan </ity>
<City> Shenzhen </ity>
<City> Guangzhou </ity>
<City> Shantou </ity>
</província>
<Nome da província = "Liaoning">
<City> Dalian </ity>
<City> Tieling </ity>
<City> Anshan </ity>
<City> Fushun </ity>
</província>
</xml-corpo>