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つが保持されます。
推薦する
CSS スティッキーレイアウトを使用してヘッダーを上部に配置する方法
適用シナリオ:新しい要件の 1 つはアンケート調査を行うことですが、必然的に多くの質問が含まれ、1 ...
Node.js における npx コマンドの使用法とシナリオ分析
npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...
Linuxでブーストライブラリをインストールするための完全な手順
序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...
JavaScript で同時実行制御を実装する方法
目次1. 同時実行制御の概要1.1 フェーズ1 1.2 フェーズ2 1.3 フェーズ3 2. 同時実...
JavaScript の一般的なステートメント ループ、判定、文字列から数値
目次1. スイッチ2. whileループ3. Do/Whileループ3. 文字列を数値に変換する1....
Docker は固定コンテナ IP アドレスを実現するためにカスタム ネットワークを作成します。
デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...
WindowsとLinux間でファイルを転送する方法
WindowsとLinux間のファイル転送（1）WinSCPを使用して、WindowsファイルをLi...
Alibaba Cloud に MySQL データベースをインストールするときに発生する 2002 エラーを解決する方法
データベースのインストール中に次のエラーが発生しました: 解決策は次のとおりです。 1. binディ...
Alibaba CloudがCloud Shieldから無料のSSL証明書（https）を申請
プロジェクトでは https サービスを使用する必要があるため、Alibaba Cloud では無料...
Yahooのフロントエンド最適化に関する35のルールについての簡単な説明
概要: 仕事でも面接でも、Web フロントエンドのパフォーマンスを最適化することは非常に重要です。で...
Zookeeper 不正アクセス テストの問題
目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...
Vueは製品の拡大鏡効果を実現します
この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...
Vueはファイルのアップロードとダウンロードを実装します
この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...
Nginx+SSL による双方向認証を実装するためのサンプル コード
まずディレクトリを作成する cd /etc/nginx mkdir ssl cd ssl CA と自...
複数の .sql ファイルを MySQL に効率的にインポートする方法の詳細な説明
MySQL には、複数の .sql ファイル (SQL ステートメントを含む) をインポートする方法...