JavaScriptを使用して州と都市のセレクターを作成する方法

ユーザーの州や都市の選択を考慮する必要がある Web サイトやアプリケーションがますます増えています。ユーザーフレンドリーな州と都市のセレクターを提供すると、ユーザーの操作エクスペリエンスが向上するだけでなく、Web サイトのユーザー満足度も向上します。この記事では、JavaScript を使用して州と都市のセレクターを作成し、それを最適化する方法について説明します。

1. 需要分析

ユーザーが選択した州に応じて、その州の下にある都市部のリストを動的に表示して、州と都市のカスケードの選択を完了します。同時に、次の機能を実装する必要があります。

1. ユーザーが最後に選択した州と都市の情報が (存在する場合) デフォルトで表示されます。
2. ユーザーが手動で州名と都市名を入力して選択できるようにします。
3. ページの応答時間が長くなるのを避けるために、地方自治体データの非同期読み込みをサポートします。

2. データの準備

州と都市のセレクターを実装するには、まず対応するデータを準備する必要があります。 Alibaba の州と都市のデータ (http://lbs.amap.com/api/javascript-api/download/) などのサードパーティ データ ソースを使用することも、自分でデータを整理することもできます。この記事では、例として Alibaba のデータ ソースを使用します。

データ ソースには、province.json と city.json という 2 つのファイルが含まれています。 province.json ファイルには、すべての州の名前と番号の情報が記録されます。 city.json ファイルには、すべての都市の名前、州番号、市番号情報が記録されます。ここで注意していただきたいのは、各州の市番号は1から始まるということです。

3. インターフェイスの設計

需要分析に基づいて、最初にセレクター インターフェイスを設計する必要があります。入力ドロップダウン リストと同様のフォームを使用して、州と都市のリストを表示し、ユーザーが州を選択すると、その州の下にある都市のリストを動的に表示できます。 CSS を使用してスタイルを設定できます。具体的なコードは次のとおりです:

<style>
  .city-selector {
    position: relative;
    display: inline-block;
    font-size: 14px;
  }
  .city-selector input {
    border: 1px solid #ccc;
    width: 200px;
    padding: 5px;
    outline: none;
    box-sizing: border-box;
  }
  .city-selector .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
    width: 200px;
    max-height: 200px;
    overflow-y: scroll;
    z-index: 1;
  }
  .city-selector .dropdown li {
    padding: 5px;
    cursor: pointer;
  }
  .city-selector .dropdown li:hover {
    background-color: #f5f5f5;
  }
  .city-selector .dropdown li.selected {
    background-color: #f5f5f5;
    font-weight: bold;
  }
</style>
<div class="city-selector">
  <input type="text" placeholder="请选择省份">
  <ul class="dropdown"></ul>
</div>

4. 州選択の実装

最初に、province.json データをページに動的にロードしてレンダリングする必要があります。すべての都道府県の名前のリスト。ユーザーが入力ボックスにコンテンツを入力すると、JavaScript を通じて対応する州を動的に照合し、一致した州の名前をドロップダウン リストに表示する必要があります。

<script>
  // 定义全局变量，保存province.json数据
  var PROVINCES = [];
  // 加载province.json数据
  fetch('province.json')
    .then(response => response.json())
    .then(data => {
      PROVINCES = data;
      renderProvinces();
    });
  // 渲染所有省份到下拉列表中
  function renderProvinces() {
    var dropdown = document.querySelector('.city-selector .dropdown');
    // 先清空下拉列表
    dropdown.innerHTML = '';
    // 循环province.json数据，渲染省份名称
    PROVINCES.forEach(province => {
      var li = document.createElement('li');
      li.textContent = province.name;
      li.dataset.id = province.id; // 将省份编号存储在data-id中
      dropdown.appendChild(li);
    });
  }
  // 监听用户输入事件，动态匹配省份名称
  document.querySelector('.city-selector input').addEventListener('input', function() {
    var inputValue = this.value.trim();
    if (inputValue === '') {
      renderProvinces();
      return;
    }
    var dropdown = document.querySelector('.city-selector .dropdown');
    var filteredProvinces = PROVINCES.filter(province => province.name.indexOf(inputValue) >= 0);
    dropdown.innerHTML = '';
    filteredProvinces.forEach(province => {
      var li = document.createElement('li');
      li.textContent = province.name;
      li.dataset.id = province.id;
      dropdown.appendChild(li);
    });
  });
</script>

5. 都市カスケード選択の実装

次に、都市カスケード選択機能を実装する必要があります。ユーザーが州を選択したら、対応する州の都市のリストを動的にロードし、ドロップダウン リストに表示する必要があります。

<script>
  // 监听用户选择省份事件，动态加载相应的城市列表
  document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName !== 'LI') {
      return;
    }
    // 将用户已选的省份名称和编号存储在input中
    var input = document.querySelector('.city-selector input');
    input.value = target.textContent;
    input.dataset.id = target.dataset.id;
    // 加载相应省份下的城市列表
    loadCities(target.dataset.id);
  });
  // 加载相应省份下的城市列表
  function loadCities(provinceId) {
    fetch('city.json')
      .then(response => response.json())
      .then(data => {
        var cities = data.filter(city => city.provinceId === provinceId);
        renderCities(cities);
      });
  }
  // 渲染城市列表到下拉列表中
  function renderCities(cities) {
    var dropdown = document.querySelector('.city-selector .dropdown');
    // 先清空下拉列表
    dropdown.innerHTML = '';
    // 循环city.json数据，渲染城市名称
    cities.forEach(city => {
      var li = document.createElement('li');
      li.textContent = city.name;
      li.dataset.id = city.id; // 将城市编号存储在data-id中
      dropdown.appendChild(li);
    });
  }
</script>

6. セレクターの最適化

都道府県と都市のセレクターを実装した後、ユーザーの操作エクスペリエンスとページのパフォーマンスを向上させるためにセレクターをさらに最適化する方法を検討する必要があります。

1. ユーザーが手動で州名と都市名を入力して選択できるようにサポート

入力ボックスに州名と都市名を入力して照合する場合、入力の遅延を設定できます。ユーザー入力を回避するためのボックス 速度が速すぎるため、ページの応答が間に合わなくなります。同時に、同じデータが繰り返し読み込まれるのを避けるために、キャッシュ メカニズムをセットアップすることもできます。

<script>
  var PROVINCES = [];
  var CITIES = {};
  var debounceTimer = null;
  // 加载province.json数据
  function loadProvinces() {
    fetch('province.json')
      .then(response => response.json())
      .then(data => {
        PROVINCES = data;
      });
  }
  // 动态匹配省份
  function filterProvinces(inputValue) {
    var dropdown = document.querySelector('.city-selector .dropdown');
    var filteredProvinces = PROVINCES.filter(province => province.name.indexOf(inputValue) >= 0);
    dropdown.innerHTML = '';
    filteredProvinces.forEach(province => {
      var li = document.createElement('li');
      li.textContent = province.name;
      li.dataset.id = province.id;
      dropdown.appendChild(li);
    });
  }
  // 监听用户输入事件
  document.querySelector('.city-selector input').addEventListener('input', function() {
    var inputValue = this.value.trim();
    if (debounceTimer) {
      clearTimeout(debounceTimer);
    }
    if (inputValue === '') {
      renderProvinces();
      return;
    }
    debounceTimer = setTimeout(function() {
      if (PROVINCES.length === 0) {
        loadProvinces();
      } else {
        filterProvinces(inputValue);
      }
    }, 300);
  });
  // 监听用户选择省份事件，动态加载相应的城市列表
  document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName !== 'LI') {
      return;
    }
    var input = document.querySelector('.city-selector input');
    input.value = target.textContent;
    input.dataset.id = target.dataset.id;
    var provinceId = target.dataset.id;
    if (CITIES[provinceId]) {
      renderCities(CITIES[provinceId]);
    } else {
      loadCities(provinceId);
    }
  });
  // 加载相应省份下的城市列表
  function loadCities(provinceId) {
    fetch('city.json')
      .then(response => response.json())
      .then(data => {
        var cities = data.filter(city => city.provinceId === provinceId);
        CITIES[provinceId] = cities;
        renderCities(cities);
      });
  }
</script>

2. 地方自治体データの非同期読み込みをサポート

ページが読み込まれるとき、必要な初期データのみをロードし、地方自治体データの読み込みを行うことができます。バックグラウンドでの非同期処理。ユーザーが州を選択すると、ページの応答時間が長くなるのを避けるために、対応する州の都市データが動的にロードされます。

<script>
  var debounceTimer = null;
  // 加载所有省份到下拉列表中
  function loadProvinces() {
    fetch('province.json')
      .then(response => response.json())
      .then(data => {
        renderProvinces(data);
      });
  }
  // 渲染所有省份到下拉列表中
  function renderProvinces(provinces) {
    var dropdown = document.querySelector('.city-selector .dropdown');
    dropdown.innerHTML = '';
    provinces.forEach(province => {
      var li = document.createElement('li');
      li.textContent = province.name;
      li.dataset.id = province.id;
      dropdown.appendChild(li);
    });
  }
  // 加载相应省份下的城市列表
  function loadCities(provinceId) {
    fetch('city.json')
      .then(response => response.json())
      .then(data => {
        var cities = data.filter(city => city.provinceId === provinceId);
        renderCities(cities);
      });
  }
  // 渲染城市列表到下拉列表中
  function renderCities(cities) {
    var dropdown = document.querySelector('.city-selector .dropdown');
    dropdown.innerHTML = '';
    cities.forEach(city => {
      var li = document.createElement('li');
      li.textContent = city.name;
      li.dataset.id = city.id;
      dropdown.appendChild(li);
    });
  }
  // 监听用户输入事件
  document.querySelector('.city-selector input').addEventListener('input', function() {
    var inputValue = this.value.trim();
    if (debounceTimer) {
      clearTimeout(debounceTimer);
    }
    if (inputValue === '') {
      loadProvinces();
      return;
    }
    debounceTimer = setTimeout(function() {
      fetch('province.json')
        .then(response => response.json())
        .then(data => data.filter(province => province.name.indexOf(inputValue) >= 0))
        .then(filteredData => {
          renderProvinces(filteredData);
        });
    }, 300);
  });
  // 监听用户选择省份的事件
  document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName !== 'LI') {
      return;
    }
    var input = document.querySelector('.city-selector input');
    input.value = target.textContent;
    input.dataset.id = target.dataset.id;
    loadCities(target.dataset.id);
  });
  // 页面加载时，只加载必要的初始数据
  loadProvinces();
</script>

7. 概要

この記事では、JavaScript を使用して州と都市のセレクターを実装する方法と、ユーザーの操作エクスペリエンスとページのパフォーマンスを向上させるためにセレクターを最適化する方法を紹介します。ユーザーフレンドリーな州と都市のセレクターを実装するには、技術的な問題だけでなく、ユーザーの習慣やニーズ、さらにはページの応答時間やパフォーマンスの問題も考慮する必要があります。この記事が少しでも参考になれば幸いです。

以上がJavaScriptを使用して州と都市のセレクターを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。