JavaScriptで作られたシンプルな3レベルのリンケージ、非常にシンプルで実用的
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> </title>
</head>
<body>
州：
<select id = "pre" onchange = "chg（this）;">
<オプション値= "-1"> </option>を選択してください
</select>
市：
<選択id = "city" onchange = "chg2（this）";> </select>
地区：
<id = "area"> </select>を選択します
</body>
<スクリプト>
//州を宣言します
var pres = ["Beijing"、 "Shanghai"、 "Shandong"]; //アレイを直接宣言します
//都市の声明
var Cities = [
["Dongcheng"、 "Changping"、 "Haidian"]、
["Pudong"、 "High Zone"]、
[「ジナン」、「チンダオ」]
];
varエリア= [
[
["dongcheng1"、 "dongcheng2"、 "dongcheng3"]、
["Changping 1"、 "Changping 2"、 "Changping 3"]、
[「ハイディアン1」、「ハイディアン2」、「ハイディアン3」]
]、、
[
["Pudong 1"、 "Pudong 2"、 "Pudong 3"]、
[「ハイゾーン1」、「ハイゾーン2」、「ハイゾーン3」]
]、、
[
[「ジナン1」、「ジナン2」]、
[「Qingdao 1」、「Qingdao 2」]
]
]
//州の公開添え字を設定します
var pindex = -1;
var preele = document.getElementById（ "pre"）;
var cityele = document.getElementById（ "city"）;
var aregele = document.getElementById（ "reagy"）;
//最初に保存された値を設定します
for（var i = 0; i <pres.length; i ++）{
//オプションを宣言します。<オプション値= "pres [i]"> pres [i] </option>
var op = new option（pres [i]、i）;
//に追加
preele.options.add（op）;
}
関数chg（obj）{
if（obj.value == -1）{
cityele.options.length = 0;
aregele.options.length = 0;
}
//値を取得します
var val = obj.value;
pindex = obj.value;
// ctiryを取得します
var cs = cities [val];
//デフォルトの領域を取得します
var as = reague [val] [0];
//最初に市場をクリアします
cityele.options.length = 0;
aregele.options.length = 0;
for（var i = 0; i <cs.length; i ++）{
var op = new option（cs [i]、i）;
cityele.options.add（op）;
}
for（var i = 0; i <as.length; i ++）{
var op = new option（[i]、i）;
aregele.options.add（op）;
}
}
関数chg2（obj）{
var val = obj.selectedindex;
var as =エリア[pindex] [val];
aregele.options.length = 0;
for（var i = 0; i <as.length; i ++）{
var op = new option（[i]、i）;
aregele.options.add（op）;
}
}
</script>
</html>
上記はこの記事の全体的な内容です。あなたがそれを気に入っていただければ幸いです。