Comment écrire un sélecteur de province et de ville en utilisant javascript

De plus en plus de sites Web et d’applications doivent prendre en compte la sélection de province et de ville par les utilisateurs. Fournir un sélecteur de province et de ville convivial peut non seulement améliorer l'expérience de fonctionnement de l'utilisateur, mais également améliorer la satisfaction de l'utilisateur du site Web. Cet article décrira comment utiliser JavaScript pour écrire un sélecteur de province et de ville et l'optimiser.

1. Analyse de la demande

Selon la province sélectionnée par l'utilisateur, affichez dynamiquement la liste des zones urbaines sous la province pour compléter la sélection des cascades de province et de ville. Parallèlement, les fonctions suivantes doivent être mises en œuvre :

1. Afficher par défaut les informations sur la province et la ville sélectionnées en dernier lieu par l'utilisateur (le cas échéant).
2. Prend en charge les utilisateurs pour saisir manuellement les noms de province et de ville pour la sélection.
3. Prend en charge le chargement asynchrone des données provinciales et municipales pour éviter un long temps de réponse des pages.

2. Préparation des données

Afin de mettre en œuvre le sélecteur de province et de ville, nous devons d'abord préparer les données correspondantes. Vous pouvez utiliser des sources de données tierces, telles que les données d'Alibaba sur les provinces et les villes (http://lbs.amap.com/api/javascript-api/download/), ou organiser les données vous-même. Cet article utilise la source de données d’Alibaba comme exemple.

La source de données contient deux fichiers, à savoir province.json et city.json. Le fichier province.json enregistre les informations sur le nom et le numéro de toutes les provinces. Le fichier city.json enregistre les noms, les numéros de province et les informations sur les numéros de ville de toutes les villes. Il convient de noter ici que le numéro de ville de chaque province commence à 1.

3. Conception de l'interface

Sur la base de l'analyse de la demande, nous devons d'abord concevoir l'interface du sélecteur. Vous pouvez utiliser un formulaire similaire à la liste déroulante de saisie pour afficher la liste des provinces et des villes, et afficher dynamiquement la liste des villes sous la province lorsque l'utilisateur sélectionne la province. Nous pouvons utiliser CSS pour définir le style. Le code spécifique est le suivant :

<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. Implémenter la sélection de province

Tout d'abord, nous devons charger dynamiquement les données province.json sur la page et afficher la liste des noms de toutes les provinces. Lorsque l'utilisateur saisit du contenu dans la zone de saisie, nous devons faire correspondre dynamiquement la province correspondante via javascript et afficher le nom de la province correspondante dans la liste déroulante.

<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. Implémenter la sélection en cascade de villes

Ensuite, nous devons implémenter la fonction de sélection en cascade de villes. Lorsque l'utilisateur sélectionne une province, nous devons charger dynamiquement la liste des villes sous la province correspondante et l'afficher dans la liste déroulante.

<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. Optimiser le sélecteur

Après avoir implémenté le sélecteur de province et de ville, nous devons réfléchir à la manière d'optimiser davantage le sélecteur pour améliorer l'expérience de fonctionnement de l'utilisateur et les performances de la page.

1. Aide les utilisateurs à saisir manuellement les noms de province et de ville pour la sélection

Lors de la saisie des noms de province et de ville dans la zone de saisie pour la correspondance, nous pouvons définir un délai pour la zone de saisie afin d'éviter aux utilisateurs de saisir trop rapidement, ce qui entraînerait une page intempestive. réponse. Dans le même temps, nous pouvons également mettre en place un mécanisme de mise en cache pour éviter de charger les mêmes données à plusieurs reprises.

<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. Prend en charge le chargement asynchrone des données provinciales et municipales

Lorsque la page est chargée, nous ne pouvons charger que les données initiales nécessaires et mettre le chargement des données provinciales et municipales en arrière-plan pour un traitement asynchrone. Lorsque l'utilisateur sélectionne une province, nous chargeons dynamiquement les données de la ville de la province correspondante pour éviter un long temps de réponse de la page.

<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. Résumé

Cet article explique comment utiliser Javascript pour implémenter le sélecteur de province et de ville, et comment optimiser le sélecteur pour améliorer l'expérience de fonctionnement de l'utilisateur et les performances de la page. La mise en œuvre d'un sélecteur de province et de ville convivial n'est pas seulement un problème technique, mais doit également prendre en compte les habitudes et les besoins de l'utilisateur, ainsi que le temps de réponse et les problèmes de performances de la page. Nous espérons que cet article pourra vous fournir des références et de l’aide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!