第2レベルのリンケージは、一般的なWebページのどこにでも見られます。通常、Z江省をクリックしたり、杭州市とjiaxing市をクリックするなどの住所を備えています。杭州とjiaxingの代わりに、北京州、ChaoyangとHaidianをクリックします。
このステップを実装するには、JavaScriptを使用して実装する必要があります。原則では、オンチェンジ時間を使用します。
まず、オンチェンジイベントは、ドメインのコンテンツが変更されたときに発生します。このイベントをサポートするJavaScriptオブジェクト:fileupload、select、text、textarea。 Selectを使用して、二次リンケージの実装を完了します。
以下はHTMLコードです。最初に、州として選択を設定し、2番目の選択を都市として設定しますが、JSの配列を使用して州に接続します。
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title> JavaScriptセカンダリリンケージ</title>
</head>
<body>
<選択id = "province">
<オプション値= "-1">件名</option>
<オプション値= "0"> beijing </option>
<オプション値= "1"> Zhejiang </option>
</select>
<id = "city">を選択します
</select>
<Script src = "../ js/provence.js"> </script>
</body>
</html>
以下はJSコードです
コードコピーは次のとおりです。
var province = document.getElementById( "stavince");
var city = document.getElementById( "City");
varエリア= [
['Chaoyang'、 'Haidian'、 'Beijing']、// 0番目の領域の配列。 0 {0,1,2}
['hangzhou'、 'haining'] //最初の領域の配列、1 {0.1}
];
関数choice(){
var opt = "";
var len = area [province.value]; //北京0が選択されている場合、len = ['chaoyang'、 'haidian']これは<span style = "background-color:#888888;"> city </span>どの州がどの都市に対応するかを接続します
if(provence.value == '-1'){// Selectの値が-1の場合、それは北京ではなく「県」という言葉であるため、この州を選択するとき、それは都市が空であることを意味します
city.innerhtml = opt;
}
for(var i = 0; i <len.length; i ++){//(i = 0; i <3; i ++)の面積の配列の数)
opt = opt + '<option値= "' + i + '">' + len [i] + '</option>' // opt = "" + <option value = "0"> chaoyang(lin [0])</option>、
// opt = <option value = "0"> chaoyang(lin [0])</option>、 + <br>
<オプション値= "1"> haidian(lin [1])</option>
// opt = <option value = "0"> chaoyang(lin [0])</option>、 + <br>
<option値= "1"> haidian(lin [1])</option> + <br>
<オプション値= "2"> beijing(lin [2])</option>
}
city.innerhtml = opt;
}
province.onchange = function(){
選ぶ();
}
第2レベルのリンケージは、一般的なWebページのどこでも見ることができます。通常、Z江省をクリックしたり、杭州市とjiaxing市をクリックするなどの住所を備えています。杭州とjiaxingの代わりに、北京州、ChaoyangとHaidianをクリックします。
このステップを実装するには、JavaScriptを使用して実装する必要があります。原則では、オンチェンジ時間を使用します。
上記はこの記事の全体的な内容です。あなたがそれを気に入っていただければ幸いです。