州と市町村の連携を簡単に実現する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 が認識されない場合の解決策

推薦する

フロントエンド開発に必要な共通ツール機能のまとめ

1. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....

HTML5+CSS3コーディング標準

黄金律プロジェクトに何人の人が取り組んでいるかに関係なく、すべてのコード行が同じ人によって書かれたよ...

Dockerは元のタグのイメージの再タグ付けと削除を実装します

docker イメージ ID は一意であり、イメージを物理的に識別できます。repository: ...

Vueはメニューナビゲーションを実装するためにelement-uiを使用します

この記事では、Element-uiを使用してメニューナビゲーションを実装するVueの具体的なコードを...

要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)

序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...

HTML テーブル境界コントロールの詳細な説明

上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...

Linux で MySQL のルート パスワードを変更する方法

序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...

TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル

tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...

Linux で PyCurl のエラーを解決する方法

「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...

Python 仮想環境のインストールとアンインストールの方法と発生する問題

Ubuntu16.04 のインストールとアンインストール pip実験環境Ubuntu 16.04; ...

親要素に対する CSS 子要素の配置の実装

解決親要素に position:relative を追加します。子要素に position:abso...

ウェブデザインと制作に関する科学的原則と提案の要約

<br />ネットワーク設計の分野では、アイトラッキングに関する研究が非常に盛んに行われ...

Node.jsで子プロセスを作成する方法

目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...