نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<head>
<title> menuvel2level.html </itlem>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<script type = "text/javaScript">
وظيفة loadxml () {
var xmldoc ؛
يحاول{
//أي
XMLDOC = جديد 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 ("Province") ؛
var prosize = provincearr.length ؛
لـ (var i = 0 ؛ i <prosize ؛ i ++) {
// إنشاء عقدة الخيار
var OptionElement = document.createElement ("الخيار") ؛
var provincename = provinceArr [i] .getAttribute ("name") ؛
// إنشاء عقدة نصية
var textelement = document.createTextNode (provincename) ؛
OptionElement.AppendChild (textelement) ؛
OptionElement.setAttribute ("value" ، provincename) ؛
var node = document.getElementById ("Province") ؛
node.appendChild (OptionElement) ؛
}
}
// الحدث تغيير المقاطعة
الوظيفة changeprovince (العقدة) {
// احصل على علامة زاوية محددة
var index = node.selectedIndex ؛
// احصل على اسم المقاطعة المقابل
var provincename = node.options [index] .value ؛
LoadCities (Provincename) ؛
}
// تحميل معلومات المدينة وفقًا لرقم المقاطعة
وظائف loadcities (proname) {
var xmldocument = loadxml () ؛
var provincearr = xmldocument.getElementSbyTagname ("Province") ؛
// احصل على عناصر المدينة
var cityselectele = document.getElementById ("المدن") ؛
var size = cityselectele.options.length ؛
لـ (var i = size ؛ i> 0 ؛ i-) {
CitySelectele.Remove (I) ؛
}
// احصل على عدد المقاطعات
var prosize = provincearr.length ؛
var prolement.
// احصل على عنصر المقاطعة المقابل
لـ (var i = 0 ؛ i <prosize ؛ i ++) {
if (provincearr [i] .getAttribute ("name") == proname) {
prolement = provincirer [i] ؛
استراحة؛
}
}
// احصل على معلومات المدينة في المقاطعة
var citiesarr = proElement.getElementSbyTagname ("City") ؛
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 ("المدن"). القيمة ؛
ALERT (Pro+":"+City) ؛
}
</script>
</head>
<body>
<SELECT ID = "Province" onChange = "ChangeProvince (this)">
<Option Value = "" SELECTER = "SELECTER">-Province-</Option>
</select>
<SELECT ID = "Cities">
<Option Value = "" Selection = "Selection">-City-</Option>
</select>
<type type = "button" value = "pop up" onClick = "getValue ()"/>
</body>
</html>
الآثار هي كما يلي:
http://img.blog.csdn.net/20140315235043343؟watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgl1agvuz2h1atuymde=/font/5a6l5l2t/fontsi/i0jkfbgl1agvuz2h =/يذوب/70/الجاذبية/الجنوب الشرقي
ملف cities.xml كما يلي:
نسخة الكود كما يلي:
<؟
<xml-body>
<province name = "shaanxi">
<city> xi'an </city>
<City> Hanzhong </cam>
<City> Baoji </city>
<city> يانان </city>
</province>
<province name = "Guangdong">
<city> foshan </city>
<City> Shenzhen </city>
<City> Guangzhou </cyt>
<City> Shantou </cly>
</province>
<province name = "liaoning">
<city> داليان </city>
<city> tieling </city>
<City> Anshan </city>
<City> Fushun </city>
</province>
</xml-body>