So schreiben Sie einen Provinz- und Stadtselektor mit Javascript

Immer mehr Websites und Anwendungen müssen die vom Benutzer gewählte Provinz und Stadt berücksichtigen. Die Bereitstellung einer benutzerfreundlichen Provinz- und Stadtauswahl kann nicht nur das Betriebserlebnis des Benutzers verbessern, sondern auch die Benutzerzufriedenheit der Website steigern. In diesem Artikel wird beschrieben, wie Sie mit JavaScript einen Provinz- und Stadtselektor schreiben und optimieren.

1. Bedarfsanalyse

Je nach der vom Benutzer ausgewählten Provinz wird die Städteliste unter der Provinz dynamisch angezeigt, um die Auswahl der Provinz- und Stadtkaskaden zu vervollständigen. Gleichzeitig müssen folgende Funktionen implementiert werden:

1. Standardmäßig werden die vom Benutzer zuletzt ausgewählten Provinz- und Stadtinformationen angezeigt (falls vorhanden).
2. Unterstützt Benutzer bei der manuellen Eingabe von Provinz- und Stadtnamen zur Auswahl.
3. Unterstützt das asynchrone Laden von Provinz- und Kommunaldaten, um lange Seitenantwortzeiten zu vermeiden.

2. Datenvorbereitung

Um den Provinz- und Stadtselektor zu implementieren, müssen wir zunächst die entsprechenden Daten vorbereiten. Sie können Datenquellen von Drittanbietern verwenden, beispielsweise die Provinz- und Stadtdaten von Alibaba (http://lbs.amap.com/api/javascript-api/download/), oder Sie können die Daten selbst organisieren. In diesem Artikel wird die Datenquelle von Alibaba als Beispiel verwendet.

Die Datenquelle enthält zwei Dateien, nämlich Province.json und City.json. Die Datei „provinz.json“ zeichnet die Namens- und Nummerninformationen aller Provinzen auf. Die Datei „city.json“ zeichnet die Namen, Provinznummern und Stadtnummerninformationen aller Städte auf. Hierbei ist zu beachten, dass die Stadtnummer jeder Provinz bei 1 beginnt.

3. Schnittstellendesign

Basierend auf der Bedarfsanalyse müssen wir zuerst die Auswahlschnittstelle entwerfen. Sie können ein Formular ähnlich der Eingabe-Dropdown-Liste verwenden, um die Liste der Provinzen und Städte anzuzeigen und die Liste der Städte unter der Provinz dynamisch anzuzeigen, wenn der Benutzer die Provinz auswählt. Wir können CSS verwenden, um den Stil festzulegen:

<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. Implementieren Sie die Provinzauswahl

Zuerst müssen wir Province.json-Daten dynamisch laden die Seite und rendert eine Liste der Namen aller Provinzen. Wenn der Benutzer Inhalte in das Eingabefeld eingibt, müssen wir die entsprechende Provinz dynamisch über Javascript abgleichen und den übereinstimmenden Provinznamen in der Dropdown-Liste rendern.

<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. Stadtkaskadenauswahl implementieren

Als nächstes müssen wir die Stadtkaskadenauswahlfunktion implementieren. Wenn der Benutzer eine Provinz auswählt, müssen wir die Liste der Städte unter der entsprechenden Provinz dynamisch laden und in der Dropdown-Liste anzeigen.

<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. Optimieren Sie den Selektor

Nach der Implementierung des Provinz- und Stadtselektors müssen wir überlegen, wie wir den Selektor weiter optimieren können, um das Bedienerlebnis des Benutzers und die Seitenleistung zu verbessern.

1. Unterstützen Sie Benutzer bei der manuellen Eingabe von Provinz- und Stadtnamen zur Auswahl.

Bei der Eingabe von Provinz- und Stadtnamen in das Eingabefeld für den Abgleich können wir dies tun Versehen Sie das Eingabefeld mit einer Verzögerung, um zu verhindern, dass Benutzer zu schnell eingeben, was zu einer verzögerten Seitenantwort führt. Gleichzeitig können wir auch einen Caching-Mechanismus einrichten, um zu vermeiden, dass dieselben Daten wiederholt geladen werden.

<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. Unterstützung des asynchronen Ladens von Provinz- und Stadtdaten

Wenn die Seite geladen ist, können wir nur die erforderlichen Anfangsdaten laden und diese ersetzen Provinzen und Städte Das Laden der Daten erfolgt asynchron im Hintergrund. Wenn der Benutzer eine Provinz auswählt, laden wir dynamisch die Stadtdaten der entsprechenden Provinz, um lange Reaktionszeiten auf der Seite zu vermeiden. 7. Zusammenfassung . Die Implementierung einer benutzerfreundlichen Provinz- und Städteauswahl ist nicht nur eine technische Angelegenheit, sondern muss auch die Gewohnheiten und Bedürfnisse des Benutzers sowie die Reaktionszeit und Leistungsprobleme der Seite berücksichtigen. Wir hoffen, dass dieser Artikel Ihnen als Referenz und Hilfe dienen kann.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie einen Provinz- und Stadtselektor mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!