Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd html 4.01 transisi // en">
<Html>
<head>
<title> menu2level.html </iteme>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8">
<type skrip = "Teks/JavaScript">
function loadXml () {
var xmldoc;
mencoba{
//YAITU
xmldoc = ActiveXObject baru ("microsoft.xmldom");
} catch (e) {
mencoba{
xmldoc = document.implementation.createdocument ("", "", null);
} catch (e) {
waspada (e.message);
kembali;
}
}
xmldoc.async = false;
xmldoc.load ("cities.xml");
mengembalikan xmldoc;
}
// Pemuatan halaman web selesai setelah pemuatan, dan provinsi sedang memuat.
onload = function () {
var xmldocument = loadXml ();
var provincearr = xmldocument.getElementsbyTagname ("provinsi");
var prosize = provincearr.length;
untuk (var i = 0; i <calons; i ++) {
// Buat Node Opsi
var optionElement = document.createElement ("option");
var provincename = provincearr [i] .getAttribute ("name");
// Buat node teks
var textElement = document.createTextNode (provinceName);
optionElement.AppendChild (TextElement);
optionElement.setAttribute ("Nilai", Provincename);
var node = document.geteLementById ("provinsi");
node.AppendChild (OptionElement);
}
}
// Acara Perubahan Provinsi
function changeProvince (node) {
// Dapatkan tanda sudut terpilih
indeks var = node.selectedIndex;
// Dapatkan nama provinsi yang sesuai
var provincename = node.Options [index] .value;
loadcities (nama provinsi);
}
// Muat informasi kota sesuai dengan nomor provinsi
function loadCities (proname) {
var xmldocument = loadXml ();
var provincearr = xmldocument.getElementsbyTagname ("provinsi");
// Dapatkan elemen kota
var cityselectele = document.geteLementById ("kota");
ukuran var = CitySelectele.Options.length;
untuk (var i = size; i> 0; i-) {
CitySelectele.remove (i);
}
// Dapatkan jumlah provinsi
var prosize = provincearr.length;
var proelement;
// Dapatkan elemen provinsi yang sesuai
untuk (var i = 0; i <calons; i ++) {
if (provincearr [i] .getAttribute ("name") == proname) {
proelement = provincearr [i];
merusak;
}
}
// Dapatkan informasi kota provinsi
var CitiesArr = proelement.getElementsbyTagname ("City");
var len = CitiesArr.length;
untuk (var i = 0; i <len; i ++) {
// Buat Node Opsi
var optionElement = document.createElement ("option");
// Dapatkan nama kota
var cityname = CitiesArr [i] .firstchild.nodevalue;
// Buat node teks
var textElement = document.createTextNode (CityName);
optionElement.AppendChild (TextElement);
optionElement.setAttribute ("nilai", CityName);
CitySelectele.AppendChild (OptionElement);
}
}
function getValue () {
var pro = document.geteLementById ("provinsi"). nilai;
var city = document.geteLementById ("kota"). nilai;
peringatan (pro+":"+kota);
}
</script>
</head>
<body>
<Pilih id = "Provinsi" Onchange = "ChangeProvince (This)">
<Option value = "" dipilih = "dipilih">-provinsi-</potion>
</pilih>
<Pilih id = "kota">
<Option value = "" dipilih = "dipilih">-kota-</potion>
</pilih>
<input type = "Tombol" value = "Pop up" onClick = "getValue ()"/>
</body>
</html>
Efeknya adalah sebagai berikut:
http://img.blog.csdn.net/20140315235043343?watermark/2/text/ahr0cdovl2jsb2cUy3nkbi5uzxqvbgl1agvuz2h1atuymde=/font/5a6a6l1agvuz2h1atuymde=/font/5a6a6l1agvuz2h1atuymde=/font/5a6a6a6 =/larut/70/gravitasi/tenggara
File City.xml adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<? Xml Version = "1.0" encoding = "UTF-8"?>
<xml-body>
<name provinsi = "shaanxi">
<ity> xi'an </ity>
<ity> Hanzhong </ity>
<ity> Baoji </ity>
<ity> yan'an </ity>
</province>
<name provinsi = "guangdong">
<ity> Foshan </ity>
<ity> Shenzhen </ity>
<ity> Guangzhou </ity>
<ity> Shantou </ity>
</province>
<name provinsi = "liaoning">
<ity> Dalian </ity>
<ity> Tieling </ity>
<ity> Anshan </ity>
<ity> Fushun </ity>
</province>
</xml-body>