このセクションでは、比較的単純なフロントエンド コードを紹介しますが、注意が必要な点もあります。
ドロップダウン メニューのラベルは select です。このラベルの下のオプション ラベルの機能は次のとおりです:
option 要素は、ドロップダウン リストのオプション (項目) を定義します。
option要素はselect要素の中にあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div>
请选择地区：
<select name="" id="proc" onchange="showCity()">
<option value="">--请选择省--</option>
</select>
<select name="" id="city" onchange="showDist()">
<option value="">--请选择市--</option>
</select>
<select name="" id="dist">
<option value="">--请选择区--</option>
</select>
</div>
</body>
</html>これは関数のフロントエンド コードです。スタイルは比較的シンプルで、重要なのは関数を実現できることです。
onchange="showCity()" が何なのか、ここでどのように書くのか理解できない人もいるかもしれません。
これは、クリックして都道府県を選択した後に都市のドロップダウン メニュー オプションをトリガーするようにバインドされたクリック イベントです。
同様に、onchange="showDist()" は、都市を選択した後にそのエリアのドロップダウン メニューをトリガーするオプションです。
これもいわゆるリンケージで、州と市区町村は三段階の関係にあるので三段階リンケージと呼ばれます。
次のセクション