JavaScriptを使用して州と都市のセレクターを作成する方法-フロントエンドQ&A-php.cn

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

1. 需要分析

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

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

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. セレクターの最適化

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

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

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

<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>

ログイン後にコピー

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

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

<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 サイトの他の関連記事を参照してください。