การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en">
<html>
<head>
<title> menu2level.html </title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<script type = "text/javascript">
function loadxml () {
var xmldoc;
พยายาม{
//เช่น
xmldoc = new ActiveXObject ("microsoft.xmldom");
} catch (e) {
พยายาม{
xmldoc = document.implementation.createdocument ("", "", null);
} catch (e) {
การแจ้งเตือน (e.message);
กลับ;
-
-
xmldoc.async = false;
xmldoc.load ("cities.xml");
ส่งคืน xmldoc;
-
// การโหลดของหน้าเว็บเสร็จสมบูรณ์หลังจากการโหลดและจังหวัดกำลังโหลด
onload = function () {
var xmldocument = loadxml ();
var provinceArr = xmldocument.getElementsByTagname ("จังหวัด");
var prosize = provinceArr.length;
สำหรับ (var i = 0; i <prosize; i ++) {
// สร้างโหนดตัวเลือก
VAR OPTIONELEMENT = document.createElement ("ตัวเลือก");
var provincename = provenceArr [i] .getAttribute ("ชื่อ");
// สร้างโหนดข้อความ
var textelement = document.createTextNode (Provincename);
OptionElement.AppendChild (TextElement);
OptionElement.setAttribute ("value", Provincename);
var node = document.getElementById ("จังหวัด");
Node.AppendChild (OptionElement);
-
-
// เหตุการณ์การเปลี่ยนแปลงจังหวัด
ฟังก์ชั่น ChangeProvince (Node) {
// รับเครื่องหมายมุมที่เลือก
ดัชนี var = node.selectedIndex;
// รับชื่อจังหวัดที่เกี่ยวข้อง
var provincename = node.options [index] .value;
LoadCities (Provincename);
-
// โหลดข้อมูลเมืองตามหมายเลขจังหวัด
ฟังก์ชั่น loadcities (ชื่อชื่อ) {
var xmldocument = loadxml ();
var provinceArr = xmldocument.getElementsByTagname ("จังหวัด");
// รับองค์ประกอบของเมือง
var cityselectele = document.getElementById ("เมือง");
ขนาด var = cityselectele.options.length;
สำหรับ (var i = size; i> 0; i-) {
CitySelectele.remove (I);
-
// รับจำนวนจังหวัด
var prosize = provinceArr.length;
var proelement;
// รับองค์ประกอบจังหวัดที่เกี่ยวข้อง
สำหรับ (var i = 0; i <prosize; i ++) {
if (provinceArr [i] .getAttribute ("ชื่อ") == ชื่อ Proname) {
ProElement = ProvenceArr [i];
หยุดพัก;
-
-
// รับข้อมูลเมืองของจังหวัด
var Citiesarr = proElement.getElementsByTagname ("เมือง");
var len = citiesarr.length;
สำหรับ (var i = 0; i <len; i ++) {
// สร้างโหนดตัวเลือก
VAR OPTIONELEMENT = document.createElement ("ตัวเลือก");
// รับชื่อเมือง
var cityname = citiesarr [i] .firstchild.nodevalue;
// สร้างโหนดข้อความ
var textelement = document.createTextNode (CityName);
OptionElement.AppendChild (TextElement);
OptionElement.setAttribute ("value", CityName);
CitySelectele.AppendChild (OptionElement);
-
-
ฟังก์ชั่น getValue () {
var pro = document.getElementById ("จังหวัด") ค่า;
var city = document.getElementById ("เมือง") ค่า;
การแจ้งเตือน (pro+":"+เมือง);
-
</script>
</head>
<body>
<select id = "Province" onChange = "ChangeProvince (นี่)">
<ตัวเลือกค่า = "" เลือก = "เลือก">-จังหวัด-</potion>
</เลือก>
<เลือก id = "เมือง">
<ตัวเลือกค่า = "" selected = "เลือก">-city-</potion>
</เลือก>
<อินพุต type = "button" value = "pop up" onclick = "getValue ()"/>>>
</body>
</html>
ผลกระทบมีดังนี้:
http://img.blog.csdn.net/20140315235043343?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgl1agvuz2h1atuymde=/font/5a6l5l5l2t VE/70/แรงโน้มถ่วง/ตะวันออกเฉียงใต้
ไฟล์ Cities.xml มีดังนี้:
การคัดลอกรหัสมีดังนี้:
<? xml version = "1.0" encoding = "utf-8"?>?
<xml-body>
<Province Name = "Shaanxi">
<iteal> xi'an </ity>
<iteal> Hanzhong </ity>
<iteal> Baoji </ity>
<yity> Yan'an </ity>
</จังหวัด>
<Province Name = "Guangdong">
<yity> Foshan </ity>
<iteal> เซินเจิ้น </ity>
<iteal> กวางโจว </ity>
<iteal> Shantou </ity>
</จังหวัด>
<Province Name = "Liaoning">
<iteal> ต้าเหลียน </ity>
<iteal> tieling </ity>
<yity> anshan </ity>
<iteal> Fushun </ity>
</จังหวัด>
</xml-body>