3階層連攜フロントエンドのJavaScript開(kāi)発
このセクションでは、比較的単純なフロントエンド コードを紹介しますが、注意が必要な點(diǎn)もあります。
ドロップダウン メニューのラベルは select です。このラベルの下のオプション ラベルの機(jī)能は次のとおりです:
option 要素は、ドロップダウン リストのオプション (項(xiàng)目) を定義します。
option要素はselect要素の中にあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級(jí)聯(lián)動(dòng)</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div>
請(qǐng)選擇地區(qū)：
<select name="" id="proc" onchange="showCity()">
<option value="">--請(qǐng)選擇省--</option>
</select>
<select name="" id="city" onchange="showDist()">
<option value="">--請(qǐng)選擇市--</option>
</select>
<select name="" id="dist">
<option value="">--請(qǐng)選擇區(qū)--</option>
</select>
</div>
</body>
</html>これは関數(shù)のフロントエンド コードです。スタイルは比較的シンプルで、重要なのは関數(shù)を?qū)g現(xiàn)できることです。
onchange="showCity()" が何なのか、ここでどのように書(shū)くのか理解できない人もいるかもしれません。
これは、クリックして都道府県を選択した後に都市のドロップダウン メニュー オプションをトリガーするようにバインドされたクリック イベントです。
同様に、onchange="showDist()" は、都市を選択した後にそのエリアのドロップダウン メニューをトリガーするオプションです。
これもいわゆるリンケージで、州と市區(qū)町村は三段階の関係にあるので三段階リンケージと呼ばれます。
