JS_javascript スキルを使用して簡単な 3 レベルのリンクを作成する

JavaScript で作成されたシンプルな 3 レベルのリンク。非常にシンプルで実用的です。

コードをコピー コードは次のとおりです:

<頭>

                                                                                           

県:

選択してください
                                                                                          都市:

地区:


<スクリプト>
// 都道府県を記載します
var pres = ["Beijing", "Shanghai", "Shandong"] // 配列
を直接宣言します。 //都市を述べてください var city = [
[「東城」、「昌平」、「海淀」]、
["浦東"、"高区"]、
[「済南」、「青島」]
];
var area = [
                                                               ["東城 1"、"東城 2"、"東城 3"]、
["昌平 1"、"昌平 2"、"昌平 3"]、
["海淀1"、"海淀2"、"海淀3"]
]、
                                                               ["pudong1"、 "pudong2"、 "pudong3"]、
以来 ]、
                                                               ["済南1"、"済南2"]、
[「青島 1」、「青島 2」]
]
]
// プロヴィンスの公開添字を設定します
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
//最初に州の値を設定します
for (var i = 0; i //オプションを宣言します。Pres[i]
var op = new Option(pres[i], i);
                                                                                                            preEle.options.add(op);
}
function 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 = area[val][0];
// まず市場をクリアしてください
cityEle.options.length = 0;
areaEle.options.length = 0;
for (var i = 0; i var op = new Option(cs[i], i);
cityEle.options.add(op);
}
for (var i = 0; i var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
function chg2(obj) {
var val = obj.selectedIndex;
var as = area[pIndex][val];
areaEle.options.length = 0;
for (var i = 0; i var op = new Option(as[i], i);
areaEle.options.add(op);
}
}

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。