رابط بسيط من ثلاثة مستويات مصنوع من JavaScript ، بسيط للغاية وعملي
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> </title>
</head>
<body>
مقاطعة:
<SELECT ID = "PRE" onChange = "Chg (this) ؛">
<value Option = "-1"> الرجاء تحديد </Option>
</select>
مدينة:
<SELECT ID = "City" OnChange = "CHG2 (this)" ؛> </select>
يصرف:
<حدد ID = "AREM"> </rection>
</body>
<script>
// إعلان المقاطعة
var pres = ["Beijing" ، "Shanghai" ، "Shandong"] ؛ // إعلان مباشرة الصفيف
// بيان المدينة
Var Cities = [
["Dongcheng" ، "Changping" ، "Haidian"] ،
["Pudong" ، "المنطقة العالية"] ،
["جينان" ، "تشينغداو"]
] ؛
مناطق var = [
[
["Dongcheng1" ، "Dongcheng2" ، "Dongcheng3"] ،
["Changping 1" ، "Changping 2" ، "Changping 3"] ،
["Haidian 1" ، "Haidian 2" ، "Haidian 3"]
]
[
["Pudong 1" ، "Pudong 2" ، "Pudong 3"] ،
["High Zone 1" ، "High Zone 2" ، "High Zone 3"]
]
[
["جينان 1" ، "جينان 2"] ،
["Qingdao 1" ، "Qingdao 2"]
]
]
// قم بتعيين تراكب عام للمقاطعة
var pindex = -1 ؛
var preele = document.getElementById ("pre") ؛
var cityele = document.getElementById ("City") ؛
var areaele = document.getElementById ("المنطقة") ؛
// اضبط القيمة المحفوظة أولاً
لـ (var i = 0 ؛ i <pres.length ؛ i ++) {
// خيار DECLARE. <orte value = "pres [i]"> pres [i] </soph>
var op = خيار جديد (pres [i] ، i) ؛
//اضف إليه
preele.options.add (op) ؛
}
وظيفة chg (obj) {
if (obj.value == -1) {
cityele.options.length = 0 ؛
areaele.options.length = 0 ؛
}
// احصل على القيمة
var val = obj.value ؛
pindex = obj.value ؛
// الحصول على ctiry
var cs = cities [val] ؛
// احصل على المنطقة الافتراضية
var as = المناطق [val] [0] ؛
// مسح السوق أولاً
cityele.options.length = 0 ؛
areaele.options.length = 0 ؛
لـ (var i = 0 ؛ i <cs.length ؛ i ++) {
var op = خيار جديد (cs [i] ، i) ؛
CityEle.options.add (OP) ؛
}
لـ (var i = 0 ؛ i <as.length ؛ i ++) {
var op = خيار جديد (مثل [i] ، i) ؛
areaele.options.add (OP) ؛
}
}
وظيفة CHG2 (OBJ) {
var val = obj.selectedIndex ؛
var as = المناطق [pindex] [val] ؛
areaele.options.length = 0 ؛
لـ (var i = 0 ؛ i <as.length ؛ i ++) {
var op = خيار جديد (مثل [i] ، i) ؛
areaele.options.add (OP) ؛
}
}
</script>
</html>
ما سبق هو المحتوى الكامل لهذه المقالة ، أتمنى أن تنال إعجابك.