州と市町村の連携を簡単に実現するJavaScript

州と市町村の連携を簡単に実現するJavaScript

この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

ステップ

* 2つのドロップダウン選択ボックスを持つページを作成する
* 最初のドロップダウンボックスにイベントがあります: change event onchange event
- メソッドadd1(this.value); 現在変更されているオプションの値を示します
* データを格納するための2次元配列を作成する
* 各配列の最初の要素は国名で、次の要素は国内の都市です。
*

1. 2次元配列を走査する

2. 結果も配列(国対応)

3. 配列の最初の値を取得し、渡された値と比較する

4. 同じ場合は、最初の値の後の要素を取得します。

5.都市の選択

6. 過去の(使用)appendChildメソッドを追加する
- オプションの作成(3つのステップ)

/*
毎回都市にオプションを追加する必要があるので
2 回目に追加するときに追加されます。

* 毎回追加する前に、都市にオプションがあるかどうかを確認し、ある場合は削除します
*/

コードは次のとおりです。

<html>
 <ヘッド>
   
  <title>州と市の連携</title>
  <スタイル タイプ = "text/css">
  </スタイル>
 </head>
 <本文>
   <select id="countyid" onchange="add1(this.value)">
  <option value="0">--選択してください--</option>
  <option value="中国">中国</option>
  <option value="米国">アメリカ合衆国</option>
  <option value="イギリス">イギリス</option>
  <option value="日本">日本</option>
 
   </選択>
 
    <選択id="都市ID">
 
   </選択>
 </本文>
 <script type="text/javascript">
 var arr = 新しい配列(4);
 arr[0]=["中国","北京","上海","深セン","杭州"];
 arr[1]=["アメリカ合衆国","ワシントン","ニューヨーク","デトロイト","シカゴ"];
 arr[2]=["イギリス","ロンドン","バーミンガム","リーズ","リバプール"];
 arr[3]=["日本","東京","大阪","北海道","長崎"];
 /*
  ステップ:
  1. 2次元配列を走査する 2. 配列と国の対応を取得する 3. 配列の最初の値を渡された値と比較する 4. 同じ場合は、最初の値の後の要素を取得する 5. 都市の選択を取得する
  6. 過去を追加 - appendChild メソッド - 作成オプション (3 つの手順)
   
  毎回都市にオプションを追加する必要があるので
  2 回目に追加するときに追加されます。
  * 毎回追加する前に、都市にオプションがあるかどうかを確認し、ある場合は削除します*/
 
 関数 add1(val){
  //都市の選択範囲を取得する
   var city1 = document.getElementById("cityid");
   var ops = city1.getElementsByTagName("オプション");
   for(var m=0;m<ops.length;m++){
    var op = ops[m];
    city1.removeChild(op);
    m--;
   }
  for(var i=0;i<arr.length;i++){
   arr1 = arr[i];
   var 最初の値 = arr1[0];
   (最初の値 == val) の場合
   {
    
    //オプションを作成する
    (var j=1;j<arr1.length;j++){
     var 値1 = arr1[j];
     var option1=document.createElement("オプション");
     var text1 = document.createTextNode(値1);
     オプション1.appendChild(テキスト1);
     city1.appendChild(オプション1);
    }
   }
   
  }
 }
 
   </スクリプト>
 
</html>

効果図のデモンストレーション:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript で判決文をエレガントに記述する例
  • 開発効率の向上に役立つ 56 個の実用的な JavaScript ツール関数
  • JavaScript はドラッグ可能なモーダルボックスを実装します
  • ドロップダウンリスト選択ボックスを実装するJavaScript
  • js タグ構文の使用法の詳細

<<:  Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順

>>:  HTML2 キャンバス SVG が認識されない場合の解決策

推薦する

CSS3のall属性の使い方を理解する

1. 互換性以下のように表示されます。 互換性は問題ありません。IE を除き、他のブラウザは基本的に...

MySQL でパーセンテージと最初の数パーセントを表示する方法

目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...

CSS 極座標のサンプルコード

序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...

JS の Promise に中止関数を追加する方法

目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...

JSはタイムラインの自動再生を実現する

最近、次のような効果を実装しました。再生ボタンをクリックするとタイムラインの再生が開始され、一時停止...

MySQL データ型の最適化の原則

MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...

Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。サーバーは検証コー...

Linux で txt を mysql にインポートする方法

序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...

Vueでシングルサインオンを実装する方法のまとめ

最近プロジェクトが中断され、RageFrame の研究は一時的に終了しました。この記事では、シングル...

elasticsearchを使用してインデックスデータを定期的に削除する

1. ESを使うこともあるリソースが限られている、またはビジネス上のニーズにより、最新の期間のデータ...

CSS3 アニメーション – ステップ機能の説明

最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...

ウェブページ制作と饅頭の関係(体験の共有)

昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...

バックエンドから返される 100,000 個のデータをフロントエンドでより適切に表示するにはどうすればよいですか?

目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...

設定ファイルを書いてMyBatisを簡単に使う方法

設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...

JavaScript スクリプトが実行されるタイミングの詳細な説明

JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...