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 シンプルショッピング数量アプレット
この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...
Vue3 コンポジション API でロジックの再利用を実装する方法
Composition API はロジック再利用手順を実装します。ロジックコードを関数に抽出します。...
JS 配列の重複を排除する 9 つの高度な方法 (実証済みで効果的)
序文一般的な方法はここには記載されていませんが、等しいかどうかを判断するための二重ループや、比較のた...
CentOS 8 に MySql をインストールしてリモート接続を許可する方法
ダウンロードしてインストールします。まず、システムに MySQL または MariaDB があるかど...
Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル
最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...
MySQLのストレージエンジンの詳細な説明
MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...
CentOS7にNginxをインストールして自動起動を設定する方法
1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...
MySQL を使用した分散ロックの実装
導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...
Centos 7 sshd の変更 | ルートログインの禁止と sshd ポートスクリプトの定義
1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...
Nginx フォワード プロキシとリバース プロキシ、および負荷分散機能の構成コード例
この記事は主に、Nginx のフォワード プロキシとリバース プロキシ、および負荷分散機能の設定コー...
docker実行時に異なるポートを占有する2つのポートを起動する問題を解決する
問題の説明: docker run -p 19918:19918/tcp -v /etc/local...
サーバー同時実行数の推定式と計算方法
最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...
Docker で最初のアプリケーションをデプロイする方法
前回の記事では、Docker Desktop をインストールし、Kubernetes を有効にしまし...
特定の MySQL テーブルの完全データと増分データをメッセージ キューに同期する - ソリューション
目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...
Vue3.xはコンポーネント通信にmitt.jsを使用します
目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...