การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> แทรกชื่อเรื่องที่นี่ </title>
<script type = "text/javascript">
// เริ่มต้นอาร์เรย์ 2D เพื่อจัดเก็บรายการเมือง
Var Cities = [
["Anqing", "Hefei", "Tongcheng"],
["Shijiazhuang", "Baoding", "Tangshan"],
["Zhengzhou", "Luoyang", "Kaifeng"]
-
// เมื่อเลือกจังหวัดให้โทรหาวิธีเพิ่มเมือง
ฟังก์ชั่น ProvinCechanged (SEL) {
// Alert ("Select's Length"+sel.options.length);
// SEL เป็นวัตถุที่เลือกจริงๆ
// โอนคอลเลกชันตัวเลือกและค้นหาตัวเลือกที่เลือก
สำหรับ (var x = 0; x <sel.options.length; x ++)
-
var opt = sel.options [x];
if (opt.Selected)
-
// เพิ่มตัวเลือกในเมืองที่เลือก
addCityToselect (x)
-
-
-
// เพิ่มรายการเมืองภายใต้จังหวัดที่เลือกไปยังเมืองเลือก
ฟังก์ชัน addCityToSelect (x) {
// ค้นหาเมืองที่เกี่ยวข้องจากอาร์เรย์สองมิติ
Var City = เมือง [X-1];
var cityselect = document.getElementById ("select_city");
/*============================= ลบองค์ประกอบที่มีอยู่แล้วในโหนด - - - - - - - -
เมื่อวิธีการที่เรียกว่าครั้งที่สองหรือ nth โหนดที่เพิ่มขึ้นก่อนหน้านี้ได้ถูกเพิ่มลงในวัตถุเลือกเมืองดังนั้นจึงมีการล้าง
แนวคิดที่ 1: เลือก RemoveChild () ของวัตถุที่เลือกดังนั้นโหนดคำสามารถจะถูกลบผ่านการสำรวจแบบวนรอบ
แนวคิด 2: ตั้งค่า select.options.length = 1 โดยตรงเพื่อให้ได้เอฟเฟกต์เดียวกัน
-
// ตั้งค่าความยาวตัวเลือกภายใต้วัตถุเลือกของเมืองเป็น 1
CitySelect.Options.length = 1;
// ตั้งค่าความยาวของคอลเลกชันตัวเลือกและลบออก
//cityselect.options.length=1;
สำหรับ (var x = 0; x <city.length; x ++)
-
// สร้างวัตถุโหนดองค์ประกอบ
VAR OPTIONNAME = Document.createElement ("ตัวเลือก");
// ตั้งค่าเนื้อหาการแสดงผลสำหรับตัวเลือก
OptionName.innerhtml = City [x];
// เพิ่มตัวเลือกที่สร้างขึ้นเพื่อเลือก
CitySelect.AppendChild (ตัวเลือก);
-
ในสถานที่นี้เพิ่มเมืองทั้งหมดภายใต้จังหวัดบางแห่งไปยังวัตถุ CitySelect
เมื่อมีการเลือกจังหวัดที่สองเป็นครั้งที่สองเมืองทั้งหมดที่อยู่ต่ำกว่าจังหวัดที่สองจะถูกเพิ่มเข้าไปใน
ภายใต้โหนด CitySelect ผลกระทบนี้ผิด ดังนั้นก่อนที่จะเพิ่มแต่ละ
ล้างเนื้อหาด้านล่างโหนด CitySelect ดูต่อไป:
============================= ลบองค์ประกอบที่มีอยู่แล้วในโหนด =================
-
-
-
</script>
</head>
<body>
<เลือก onChange = "ProvinCechanged (นี่);">
<!-ความหมายของสิ่งนี้: หมายถึงการเลือกวัตถุที่เลือกไว้ล่วงหน้า (นี้) และในวิธีนี้
ผ่านวัตถุเองเป็นพารามิเตอร์ในการทำงาน -
<pontion> โปรดเลือกจังหวัด </petion>
<petion> anhui </petion>
<petion> Hebei </petion>
<Poption> Henan </petion>
</เลือก>
<เลือก id = "select_city">
<pontion> โปรดเลือกเมือง </petion>
</เลือก>
</body>
</html>