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つが保持されます。
推薦する
HTMLのマーキータグは、シームレスなスクロールマーキー効果を実現します。
<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...
Vue+thinkphp5.1+axiosでファイルアップロードを実現
この記事では、thinkphp5.1 + Vue+axiosを使用してファイルをアップロードする方法...
MySql5.x を MySql8.x にアップグレードする方法と手順
MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...
Zabbixのインストールと展開の詳細な説明
序文Zabbix は最も主流のオープンソース監視ソリューションの 1 つです。導入自体は難しくありま...
MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)
質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...
MySQLユーザー権限管理の詳細な説明
目次序文： 1. ユーザー権利の概要2. 実際の権限管理序文：データベースのユーザー権限管理について...
Dockerデータを完全にクリーンアップする方法
目次定期的に剪定するミラーエビクションコンテナのクリーンアップネットワークソート体積の蒸発完全にクリ...
JavaScript でドラッグ可能なプログレスバーを実装する
この記事では、ドラッグ可能なプログレスバーを実装するためのJavaScriptの具体的なコードを参考...
Nginx 逆生成 Mogilefs 分散ストレージ例の詳細な説明
1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...
初心者のための入門チュートリアル⑤：ウェブサイト登録はとても簡単、簡単な登録のヒント
スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...
MySQL-8.0.26 構成グラフィックチュートリアル
はじめに: 最近、会社のプロジェクトでデータベースのバージョンが変更されました。ここでは、MySQL...
Nginx に React プロジェクトをデプロイする方法の例
テストプロジェクト: react-demo react-demo プロジェクトをサーバーにクローンし...
WeChatアプレットの入力レベルとテキストエリアレベルの浸透率が高すぎる問題の解決策
WeChat ミニプログラムのネイティブ コンポーネントであるカメラ、キャンバス、入力 (フォーカス...
Nginx サービス クイック スタート チュートリアル
目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...
ルートパスワードを変更するための MySQL 設定、MySQL サーバー接続、MySQL 共通コマンド図
1. ルートパスワードの設定と変更mysql が起動しているかどうかを確認します。起動していない場合...