js は、州、市、地区の 3 段階の選択カスケードを実装します。
|
この記事では、省、市、地区の3段階選択を実現するためのjsの具体的なコードを紹介します。具体的な内容は次のとおりです。
コード：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
</head>
<本文>
<select id="州">
<option>---選択してください---</option>
</選択>
<選択id="都市">
<option>---選択してください---</option>
</選択>
<選択id="エリア">
<option>---選択してください---</option>
</選択>
<script src="addr.js"></script>
<script src="../lib/jquery-3.3.1.js"></script>
<スクリプト>
var プロ = [];
$(関数(){
$.each(temp,関数(){
$("#province").append("<option>"+$(this)[0].label+"</option>");
});
$("#province").on("change",関数(){
$("#city").html("<option>"+"---選択してください---"+"</option>");
$("#area").html("<option>"+"---選択してください---"+"</option>")
var select_pro = $(this).val();
$.each(temp,関数(インデックス,要素){
if (element.label == select_pro){
var city = element.children;
(i = 0 とします; i < city.length ; i++) {
$("#city").append("<option>"+city[i].label+"</option>");
}
$("#city").on('change',function()
{
$("#area").html("<option>"+"---選択してください---"+"</option>");
var select_city = $(this).val();
(var i=0;i < city.length; i++) の場合
{
console.log(city[i].label);
(city[i].label == select_city)の場合
{
var area = city[i].children;
(var i=0;i < area.length; i++) の場合
{
$("#area").append("<option>"+area[i].label+"</option>");
}
}
}
});
}
});
});
});
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Tomcat でタイムアウトしたセッションを監視および削除する方法
>>: 1つのSQL文でMySQLの重複排除が完了し、1つが保持されます。
推薦する
Centos7にnginxをインストールする方法
必要な環境をインストールする1. gccのインストールnginx をインストールするには、公式サイト...
Linux でファイルを実行するときに「そのようなファイルまたはディレクトリはありません」というプロンプトが表示される理由を深く理解する
1 背景最近、ZC706-ARM 開発ボードの Linux システムでコンパイル システム (apt...
Linux の MySQL でリモート接続を承認する方法
注意: 他のマシン (IP) は、承認なしではクライアント経由で MySQL データベースに接続でき...
JavaScript スロットリングとアンチシェイクに関する簡単な説明
目次スロットルと手ぶれ防止コンセプト：違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...
ウェブページ入力ボックスのスタイルトリガー効果
<br />この例では、主に onblur と onFocus という 2 つのパラメー...
MySQL の起動オプションとシステム変数の例の詳細な説明
目次ブートオプションコマンドラインパラメータの長い形式と短い形式設定ファイル構成グループシステム変数...
Linux の 5 ステップ ビルド カーネル ツリー
目次0. システムに付属するカーネルツリー1. 環境設定最初のステップステップ2 2. ソースコード...
Linuxでバージョン情報を表示する方法
Linux でバージョン情報を表示する方法。ビット数、バージョン情報、CPU コア情報、CPU 固有...
HTML チュートリアル: よく使われる HTML タグのコレクション (6)
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
MySQL に接続されている IP アドレスを表示する方法の例
具体的な方法：まずコマンドプロンプトを開きます。次に、[ mysql -u root -p ] コマ...
MySQL バージョン 5.7 以降で、SELECT リストの式 #1 が GROUP BY 句に含まれておらず、非集計が含まれているというグループ化エラーを解決します。
理由： MySQL 5.7.5 以降では機能依存関係の検出が実装されています。 only_full_...
Kali Linux インストール VMware ツールのインストール プロセスと VM インストール vmtools ボタン グレー
Xiaobai は vmtools のインストールを記録します。 1. 意義と機能: VMWARE ...
mysql5.7.18.zip インストール不要版設定チュートリアル（Windows）
これは私が以前使用した mysql5.7.18.zip のインストール チュートリアルです。まずこれ...
MySql ストアド プロシージャ パラメータの初歩的な使用法の詳細な説明
パラメータでのストアドプロシージャの使用IN パラメータは、プロシージャに情報を渡すためにのみ使用さ...
TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明
目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...