Javascript は州と都市の複数選択を実装します-フロントエンドQ&A-php.cn

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

1. 実装アイデア

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

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

2. 実装方法

コンポーネント構造

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

<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 属性を設定します。

県データ

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

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

ログイン後にコピー

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

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

都道府県データを取得したら、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 ループを使用して走査し、走査結果を

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

ユーザーが州を選択すると、現在選択されている州に基づいてその州内のすべての都市を動的に生成する必要があります。この操作を実装するには、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 ステートメントを使用して、現在走査されているアイテムが現在選択されている州に属しているかどうかを判断します。属している場合は、都市のドロップダウンメニューに表示されます。

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

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

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 ステートメントを使用して、現在走査されているアイテムが現在選択されている都市に属するかどうかを判断します。属する場合は、その項目が地区と郡のドロップダウンメニューに表示されます。

コードの概要

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

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

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