แรงจูงใจ:
ตอนนี้เรามาทำตัวอย่างเล็ก ๆ ของการใช้ XML ใน IE: การแก้ปัญหาการเชื่อมโยงของเมนูแบบเลื่อนลงสองครั้ง บางทีตัวอย่างที่พบบ่อยที่สุดคือการเลือกจังหวัดแล้วเปลี่ยนตัวเลือกเมือง ดังนั้นเรามาลองใช้ XML เพื่อทำให้สมบูรณ์กันดีกว่า
ฟังก์ชั่นบางอย่างที่ฉันแนะนำก่อนหน้านี้ถูกนำไปใช้โดยตรงโดยใช้ไฟล์ XML+XSL คุณอาจไม่คุ้นเคยกับการใช้งานมากนัก ดังนั้นคราวนี้ฉันจะใช้ HMTL+XML โดยหวังว่าจะทำให้ทุกคนเข้าใจได้ชัดเจนยิ่งขึ้น--" XML สามารถทำได้ เรียบง่าย!" :)
วัสดุ:
มี 2 ไฟล์ที่เชื่อมโยงกับเมนูการเลือกวอลุ่ม XML: Citys.xml และ CitySelect.htm
ฟังก์ชันคือ:
หลังจากเลือกจังหวัดแล้ว เมืองที่เกี่ยวข้องสามารถแสดงได้โดยอัตโนมัติ ซึ่งสะดวกสำหรับผู้ใช้ ปรับปรุงการโต้ตอบข้อมูลอย่างมีประสิทธิภาพ และทำให้เพจของคุณมีสีสันมากขึ้น
ผล:
เรียกดูที่นี่
รหัส:
เมือง.xml
<จีน>
<เมือง>จิ่วเจียง
<เมือง>หนานชาง
<เมือง>หลูซาน
<เมือง>จิงเต๋อเจิ้น
<รหัสรัฐ = "2" ชื่อ = "ปักกิ่ง">
<เมือง>ปักกิ่งตะวันตก
<เมือง>จูหยงกวน
<เมือง>สวนซิงหัว
<เมือง>โจวโข่วเตียน
<เมือง>ฝูโจว
<เมือง>เซียะเหมิน
<เมือง>จางโจว
<สถานะ id="4" name="กานซู">
<เมือง>หลานโจว
<ซิตี้>โลเมน
<เมือง>เจียหยูกวน
<สถานะ id="5" ชื่อ="กวางตุ้ง">
<เมือง>กวางโจว
<เมือง>เซินเจิ้น
<เมือง>ตงกวน
<เมือง>สือปาย
<เมือง>เหอเฟย์
<เมือง>หวงซาน
<เมือง>เกาลูนฮิลล์
<เมือง>หม่าอันชาน
CitySelect.htm
: ChooseState
(อ่านชื่อจังหวัดในข้อมูล XML และเพิ่มลงในรายการแบบเลื่อนลงของ SelState)
ฟังก์ชั่นเลือกสถานะ()
-
แหล่งที่มา var;
var sourceName = "เมือง.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //สร้างอินสแตนซ์ตัวแยกวิเคราะห์ MSXML
แหล่งที่มา async = เท็จ;
source.load(sourceName); //โหลดเอกสาร XML
root = source.documentElement; // ตั้งค่าองค์ประกอบเอกสารเป็นองค์ประกอบโหนดรูท
sortField=root.selectNodes(" //@name "); //ค้นหาโหนดทั้งหมดที่มีแอตทริบิวต์ที่มีชื่อ
for(var i=0;i
var oOption = document.createElement('ตัวเลือก');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].ข้อความ;
form1.SelState.options.add(oOption);
-
เลือกเมือง();
}
ฟังก์ชันแบบกำหนดเอง: เลือกเมือง
(อ่านชื่อเมืองที่เกี่ยวข้องในข้อมูล XML ตามชื่อจังหวัดที่เลือกในปัจจุบัน และเพิ่มลงในรายการแบบเลื่อนลง SelCity)
ฟังก์ชั่นเลือกเมือง()
-
x=form1.SelState.selectedIndex; //อ่านตัวเลือกปัจจุบันของช่องแบบเลื่อนลงจังหวัด
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); // ค้นหาโหนดเมืองทั้งหมดภายใต้โหนด State ซึ่งมีค่าแอตทริบิวต์ชื่อเท่ากับพารามิเตอร์ y
for(var i=form1.SelCity.options.length-1;i>=0;--i) // เลิกทำรายการเดิม
-
form1.SelCity.options.remove(i)
-
for(var i=0;i
var oOption = document.createElement('ตัวเลือก');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].ข้อความ;
form1.SelCity.options.add(oตัวเลือก);
-
-
ซอร์สโค้ดแบบฟอร์ม
คำบรรยาย:
เมื่อฉันเริ่มเรียนรู้ XML ครั้งแรก ฉันก็สับสนเหมือนคนอื่นๆ - "ฉันเรียน XML แล้ว แต่ฉันควรใช้มันอย่างไร" คำถามนี้ขัดขวางฉันมาเป็นเวลานาน นานมาแล้ว...
เพราะอีคอมเมิร์ซ และการพัฒนาซอฟต์แวร์เป็นความเชี่ยวชาญของฉัน ฉันคิดว่าควรเริ่มจากสิ่งที่ฉันคุ้นเคยมากที่สุดจะดีกว่า ดังนั้นฉันจึงใช้ฟังก์ชันที่ใช้บ่อยที่สุดในการสร้างเว็บไซต์ในรูปแบบ XML คุณก็ทำได้เช่นกัน!