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 で yum を使用して Mysql5.7.19 をインストールする詳細な手順
Centos7 の yum ソースには、mysql の代わりに mariaDB が使用されているため...
MySQL 8.0.17 をインストールしてリモート アクセスを構成する方法
1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...
vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します
この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...
MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます
データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...
WeChatアプレットがテキストスクロールを実装
この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...
MySQL 起動エラーを解決する: エラー 2003 (HY000): 'localhost' の MySQL サーバーに接続できません (10061)
このエラーは初心者によく発生します。この記事では主に、エラー 2003 (HY000): '...
JS を使用して HTML で回転するクリスマスツリーを実装する
<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...
Vue での this.$set の使用に関する詳細な説明
目次Vue での this.$set の使用使用なぜレスポンシブなのか?分析する要約するVue での...
html2canvasで画像が正常にキャプチャできない時の解決方法
質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...
CSS3で跳ねるボールのアニメーションを実現
私は通常、大手ウェブサイトの特別ページや製品リリースページを訪問するのが好きです。なぜなら、たくさん...
Nginx ポート競合を解決するトラブルシューティング方法の例
問題の説明データ転送に Nginx を使用し、フロントエンドとバックエンドが分離された Spring...
スライド階段効果を実現するjQuery
この記事では、階段スライド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...
VUEをベースにしたシンプルな学生情報管理システムの実装
目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...
Linux で xargs コマンドを使用する詳細なチュートリアル
みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...
UbuntuはPythonスクリプトのサンプルコードを定期的に実行する
オリジナルリンク: https://vien.tech/article/157序文この記事では、Ub...