州と市町村の連携を簡単に実現する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>

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