ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は単純な 2 次 linkage_javascript スキルを実装します

JavaScript は単純な 2 次 linkage_javascript スキルを実装します

WBOY
WBOYオリジナル
2016-05-16 16:08:311216ブラウズ

第 2 レベルのリンクは、一般的な Web ページのどこにでも見られます。たとえば、浙江省をクリックすると杭州市と嘉興市が表示され、北京省をクリックすると朝陽市と海淀市が表示されます。杭州と嘉興。

このステップを実行するには、JavaScript を使用する必要があります。原則として、onchange 時間を使用します。

まず、フィールドの内容が変更されたときに onchange イベントが発生します。このイベントをサポートする JavaScript オブジェクト: fileUpload、select、text、textarea 二次リンケージを実装するために select を使用します。

以下は HTML コードです。まず、1 つの選択を州に設定し、2 番目の選択を都市に設定します。これは、js の配列を使用して州に接続します。

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



<頭>

JavaScript 二次リンク









<スクリプト src="../js/province.js">


以下は js コードです

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

var 州 = document.getElementById("州");
var city = document.getElementById("city");
var area = [
['Chaoyang','Haidian','Beijing'], //0番目のエリアの配列。 0{0,1,2}
['杭州','海寧'] //最初のエリアの配列 1{0.1}
];
関数選択(){
var opt = "";
var len = area[province.value]; //北京0を選択した場合、len=['朝陽','海淀'] これは、どの省がどの都市に対応するかを結び付けるためのものです都市配列
if(province.value == '-1'){ //select の値が -1 の場合、それは北京ではなく '地方' という単語なので、この地方を選択するときは、その都市を空にします
city.innerHTML = opt;
}
for(var i = 0;i opt = opt ' //opt = ,

<オプション値 = "1">Haidian(lin[1])
//opt = ,

<オプション値 = "1">Haidian(lin[1])
<オプション値 = "2">北京(lin[2])
}
City.innerHTML = オプト;
}
州.onchange = function(){
選択();
}

第 2 レベルのリンクは、一般的な Web ページのどこにでも見られます。たとえば、浙江省をクリックすると杭州市と嘉興市が表示され、北京省をクリックすると朝陽市と海淀市が表示されます。杭州と嘉興。

このステップを実行するには、JavaScript を使用する必要があります。原則として、onchange 時間を使用します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。