3階層連携フロントエンドのJavaScript開発

このセクションでは、比較的単純なフロントエンドコードを紹介しますが、注意が必要な点もあります。

ドロップダウンメニューのラベルは 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()" は、都市を選択した後にそのエリアのドロップダウンメニューをトリガーするオプションです。

これもいわゆるリンケージで、州と市区町村は三段階の関係にあるので三段階リンケージと呼ばれます。

学び続ける

新しいファイル

<!DOCTYPE html> <html lang="en"> <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>

提出するリセットコード

自動運転