تحفيز:
لنقم الآن بمثال صغير لتطبيق XML في IE: حل مشكلة ربط القوائم المنسدلة المزدوجة. ولعل المثال الأكثر شيوعًا هو تحديد مقاطعة ثم تغيير خيارات المدينة، لذلك دعونا نحاول استخدام XML لإكماله.
تم تنفيذ بعض الوظائف التي قدمتها من قبل مباشرةً باستخدام ملفات XML+XSL، ربما لا تكون على دراية باستخدامها، لذا سأستخدم HMTL+XML هذه المرة، على أمل أن أمنح الجميع فهمًا أوضح--" XML يمكن أن يكون كذلك. بسيط!" :)
مادة:
يوجد ملفان مرتبطان بقائمة تحديد حجم XML: Citys.xml وCitySelect.htm
والوظائف هي:
بعد تحديد المقاطعة، يمكن عرض المدينة المقابلة تلقائيًا، وهو أمر مناسب للمستخدمين، ويحسن تفاعل البيانات بشكل فعال، ويجعل صفحتك أكثر ألوانًا.
تأثير:
تصفح هنا
شفرة:
مدن.xml
<?xml version="1.0" encoding="gb2312"?>
<الصين>
<معرف الدولة = "1" اسم = "جيانغشي">
<مدينة>جيوجيانغ</مدينة>
<مدينة>نانتشانغ</مدينة>
<مدينة>لوشان</مدينة>
<مدينة>جينغدتشن</مدينة>
</الدولة>
<معرف الدولة = "2" الاسم = "بكين">
<مدينة>غرب بكين</مدينة>
<مدينة>جويونغقوان</مدينة>
<مدينة>حديقة تسينغهوا</مدينة>
<مدينة>تشوكوديان</مدينة>
</الدولة>
<معرف الدولة = "3" الاسم = "فوجيان">
<مدينة>فوتشو</مدينة>
<مدينة>شيامن</مدينة>
<مدينة>تشانغتشو</مدينة>
</الدولة>
<معرف الدولة = "4" اسم = "قانسو">
<مدينة>لانتشو</مدينة>
<مدينة>لومين</مدينة>
<مدينة>جيايوقوان</مدينة>
</الدولة>
<معرف الدولة = "5" الاسم = "قوانغدونغ">
<مدينة>قوانغتشو</مدينة>
<مدينة>شنتشن</مدينة>
<مدينة>دونجوان</مدينة>
<مدينة>شيباي</مدينة>
</الدولة>
<معرف الدولة = "6" الاسم = "آنهوي">
<مدينة>خفي</مدينة>
<مدينة>هوانغشان</مدينة>
<مدينة>كولون هيل</مدينة>
<مدينة>مانشان</مدينة>
</الدولة>
</الصين>
CitySelect.htm
: اختر الحالة
(اقرأ اسم المقاطعة في بيانات XML وأضفه إلى قائمة SelState المنسدلة)
دالة اختيار الحالة ()
{
فار المصدر؛
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); // إنشاء مثيل محلل MSXML
source.async = false;
source.load(sourceName); // تحميل مستند XML
root = source.documentElement; // قم بتعيين عنصر المستند كعنصر العقدة الجذرية
SortField=root.selectNodes(" //@name "); // ابحث عن جميع العقد التي تحتوي سماتها على الاسم
for(var i=0;i<sortField.length;++i) // أضف أسماء المقاطعات إلى القائمة المنسدلة
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value =sortField[i].text;
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;); // ابحث عن جميع عقد المدينة ضمن عقدة الحالة التي تساوي قيمة سمة اسمها المعلمة y
for(var i=form1.SelCity.options.length-1;i>=0;--i) // التراجع عن عنصر القائمة الأصلي
{
form1.SelCity.options.remove(i)
}
for(var i=0;i<sortField.length;++i) // أضف اسم المدينة إلى القائمة المنسدلة
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value =sortField[i].text;
form1.SelCity.options.add(oOption);
}
}
كود مصدر النموذج
<BODY onLoad="ChooseState()">
<إجراء النموذج = "" الأسلوب = "post" id = "form1" name = "form1">
<SELECT name="SelState" id="SelState" onchange="ChooseCity()" >
</SELECT>
<SELECT name="SelCity" id="SelCity" >
</SELECT>
</فورم>
</BODY>
حاشية:
عندما بدأت تعلم XML لأول مرة، كان لدي نفس الارتباك مثل أي شخص آخر - "لقد تعلمت XML، ولكن كيف يجب أن أستخدمه؟" هذا السؤال أعاقني لفترة طويلة، لفترة طويلة...
بسبب التجارة الإلكترونية وتطوير البرمجيات هي خبرتي، اعتقدت أنه سيكون من الأفضل أن أبدأ بما أعرفه أكثر. لذلك قمت بتنفيذ بعض الوظائف الأكثر استخدامًا في إنشاء مواقع الويب بتنسيق XML. يمكنك أن تفعل ذلك أيضا!