Javascript は州と都市の複数選択を実装します

情報化社会の加速に伴い、インターネットは私たちの生活に欠かせないものとなり、日常生活の中でパソコンや携帯電話などを利用してインターネットを利用することが必須の習慣となっています。 Web デザインでは、州や都市を複数選択する機能が関与することが多く、これを実装するには JavaScript を使用する必要があります。

1. 実装アイデア

州と都市の複数選択機能を実現するプロセスでは、複数のドロップダウン メニューを使用する必要があります。各ドロップダウン メニューはレベルに対応しています。最上位のドロップダウン メニュー 州を選択するには、ドロップダウン メニューのオプションは州名です。ユーザーが州を選択すると、次のドロップダウン メニューが動的に生成されて表示されます。州内のすべての都市エリア、および都市名はドロップダウン メニューのオプションです。ユーザーが州を選択すると、都市を選択した後、下のドロップダウン メニューが再度生成され、その地域内のすべての郡が表示されます。市区町村名はドロップダウン メニューのオプションです。

この機能の実装のアイデアを考慮すると、jQuery やその他のライブラリなど、コーディング効率を向上させるためにいくつかの JavaScript ライブラリを使用できます。

2. 実装方法

1. コンポーネント構造

この機能を実現するには、まずコンポーネント構造を構築する必要があります。コンポーネント構造は、実際のニーズに応じて異なる場合があります。ここでは、以下に示すように、より一般的な方法を使用して実装します:

<div>
  <select id="province">
    <option value="">请选择省份</option>
  </select>

  <select id="city">
    <option value="">请选择城市</option>
  </select>

  <select id="district">
    <option value="">请选择区域</option>
  </select>
</div>

このコンポーネント構造では、最初に、「」に対応する 3 つのドロップダウン メニュー コンポーネントを定義します。それぞれ「州」、「市」、「地域」です。ここでは、後続の操作を容易にするために、それぞれに id 属性を設定します。

2. 県データ

県の複数選択機能を実装する前に、まず県データを準備する必要があります。つまり、すべての県名を配列に格納します。そのため、レンダリング時にユーザーが選択できるのは、州のドロップダウン メニューがある場合のみです。デモンストレーションの便宜上、ここでは州データを格納する配列を直接定義します。

var provinceArray = [
  {"name": "北京市", "value": "110000"},
  {"name": "天津市", "value": "120000"},
  {"name": "河北省", "value": "130000"},
  ……
];

上記のコードでは、すべての州とその値を含む州配列を定義します。この値は各州を区別するために使用されます。

3. 都道府県ドロップダウン メニューのレンダリング

都道府県データを取得したら、JavaScript コードを使用して都道府県ドロップダウン メニューをレンダリングする必要があります。この操作は jQuery などのライブラリを通じて実現できます。

function renderProvince() {
  var html = '<option value="">请选择省份</option>';
  for (var i = 0; i < provinceArray.length; i++) {
    html += '<option value="' + provinceArray[i].value + '">' + provinceArray[i].name + '</option>';
  }
  $('#province').html(html);
}

上記のコード スニペットを使用すると、州のデータを州のドロップダウン メニューに表示できます。ここでは、for ループを使用して走査し、走査結果を タグの形式で州ドロップダウン メニューに挿入します。

4. 都市ドロップダウン メニューのレンダリング

ユーザーが州を選択すると、現在選択されている州に基づいてその州内のすべての都市を動的に生成する必要があります。この操作を実装するには、jQuery などのライブラリを使用する必要もあります。この操作の実装は 2 つのステップに分割する必要があります: 最初のステップは、現在選択されている州を取得することです; 2 番目のステップは、州の情報に基づいて都市のドロップダウン メニューを動的に生成することです。具体的な操作は次のとおりです。

function renderCity(provinceValue) {
  var cityArray = [
    {"name": "城市1", "value": "110100"},
    {"name": "城市2", "value": "110200"},
    {"name": "城市3", "value": "110300"},
    ……
  ];

  var html = '<option value="">请选择城市</option>';
  for (var i = 0; i < cityArray.length; i++) {
    if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) {
      html += '<option value="' + cityArray[i].value + '">' + cityArray[i].name + '</option>';
    }
  }
  $('#city').html(html);
}

このコード スニペットでは、最初にすべての都市とその値を含む都市データを定義します。次に、都市データを走査するプロセス中に、if ステートメントを使用して、現在走査されているアイテムが現在選択されている州に属しているかどうかを判断します。属している場合は、都市のドロップダウン メニューに表示されます。

5. 地区と郡のドロップダウン メニューのレンダリング

ユーザーが選択した都市を取得した後、次の情報に基づいて都市のすべての地区と郡を動的に生成する必要があります。現在選択されている都市。この操作を実装するコードは次のとおりです。

function renderDistrict(cityValue) {
  var districtArray = [
    {"name": "区县1", "value": "110101"},
    {"name": "区县2", "value": "110102"},
    {"name": "区县3", "value": "110103"},
    ……
  ];

  var html = '<option value="">请选择区域</option>';
  for (var i = 0; i < districtArray.length; i++) {
    if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) {
      html += '<option value="' + districtArray[i].value + '">' + districtArray[i].name + '</option>';
    }
  }
  $('#district').html(html);
}

このコード セグメントでは、最初にすべての地区と郡とその値を含む地区と郡のデータを定義します。次に、地区と郡のデータを走査するプロセス中に、if ステートメントを使用して、現在走査されているアイテムが現在選択されている都市に属するかどうかを判断します。属する場合は、その項目が地区と郡のドロップダウン メニューに表示されます。

6. コードの概要

上記のコードを統合すると、州と都市の複数の選択を実現できます。完全なコードは次のとおりです:

var provinceArray = [
  {"name": "北京市", "value": "110000"},
  {"name": "天津市", "value": "120000"},
  {"name": "河北省", "value": "130000"},
  ……
];

function renderProvince() {
  var html = '<option value="">请选择省份</option>';
  for (var i = 0; i < provinceArray.length; i++) {
    html += '<option value="' + provinceArray[i].value + '">' + provinceArray[i].name + '</option>';
  }
  $('#province').html(html);
}

function renderCity(provinceValue) {
  var cityArray = [
    {"name": "城市1", "value": "110100"},
    {"name": "城市2", "value": "110200"},
    {"name": "城市3", "value": "110300"},
    ……
  ];

  var html = '<option value="">请选择城市</option>';
  for (var i = 0; i < cityArray.length; i++) {
    if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) {
      html += '<option value="' + cityArray[i].value + '">' + cityArray[i].name + '</option>';
    }
  }
  $('#city').html(html);
}

function renderDistrict(cityValue) {
  var districtArray = [
    {"name": "区县1", "value": "110101"},
    {"name": "区县2", "value": "110102"},
    {"name": "区县3", "value": "110103"},
    ……
  ];

  var html = '<option value="">请选择区域</option>';
  for (var i = 0; i < districtArray.length; i++) {
    if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) {
      html += '<option value="' + districtArray[i].value + '">' + districtArray[i].name + '</option>';
    }
  }
  $('#district').html(html);
}

renderProvince();

$('#province').change(function () {
  var provinceValue = $(this).val();
  renderCity(provinceValue);
  renderDistrict('');
});

$('#city').change(function () {
  var cityValue = $(this).val();
  renderDistrict(cityValue);
});

3、実装効果

上記のコードの実装を通じて、以下の図に示すように、州と都市を複数選択した完全な例を取得できます。

#現時点で、州と都市の複数選択機能の実装が完了しました。

一般に、州や市区町村の複数選択機能の実装は難しくなく、いくつかの簡単なコード操作を行うだけでこの機能を実現できます。実際のプロジェクトでは、特定のニーズに応じてコード構造を適切に調整するだけで、州や都市のより複雑で豊富な複数選択機能を実現できます。

以上がJavascript は州と都市の複数選択を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。