การเชื่อมโยงสามระดับง่าย ๆ ที่ทำจาก JavaScript ง่ายมากและใช้งานได้จริง
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> </title>
</head>
<body>
จังหวัด:
<select id = "pre" onChange = "CHG (นี่);">
<ตัวเลือกค่า = "-1"> โปรดเลือก </potion>
</เลือก>
เมือง:
<select id = "city" onChange = "CHG2 (นี่)";> </Select>
เขต:
<เลือก id = "พื้นที่"> </select>
</body>
<script>
// ประกาศจังหวัด
var pres = ["ปักกิ่ง", "เซี่ยงไฮ้", "มณฑลซานตง"]; // ประกาศอาร์เรย์โดยตรง
// คำแถลงของเมือง
Var Cities = [
["Dongcheng", "Changping", "Haidian"],
["Pudong", "High Zone"],
["Jinan", "Qingdao"]
-
พื้นที่ 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"]
-
-
["Jinan 1", "Jinan 2"],
["Qingdao 1", "Qingdao 2"]
-
-
// ตั้งค่าตัวห้อยสาธารณะสำหรับจังหวัด
var pindex = -1;
var preele = document.getElementById ("pre");
var cityele = document.getElementById ("เมือง");
VAR AREALELE = Document.getElementById ("พื้นที่");
// ตั้งค่าที่บันทึกไว้ก่อน
สำหรับ (var i = 0; i <pres.length; i ++) {
// ประกาศตัวเลือก <ตัวเลือกค่า = "pres [i]"> pres [i] </petion>
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 = เมือง [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>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ฉันหวังว่าคุณจะชอบ