Javascript implementiert die Mehrfachauswahl von Provinzen und Städten

Mit der beschleunigten Entwicklung des Informationszeitalters ist das Internet zu einem unverzichtbaren Bestandteil unseres Lebens geworden. Es ist für Menschen zu einer notwendigen Gewohnheit geworden, das Internet in ihrem täglichen Leben über Computer, Mobiltelefone und andere Geräte zu nutzen. Beim Webdesign kommt es häufig auf die Funktion der Mehrfachauswahl von Provinzen und Städten an, für deren Implementierung wir JavaScript verwenden müssen.

1. Implementierungsideen

Bei der Realisierung der Mehrfachauswahlfunktion von Provinzen und Städten müssen wir mehrere Dropdown-Menüs verwenden, die einer Ebene der Region entsprechen -Down-Menü dient zur Provinzauswahl. Wenn der Benutzer eine Provinz auswählt, wird das Dropdown-Menü unten dynamisch generiert, um alle städtischen Gebiete in der Provinz anzuzeigen Option des Dropdown-Menüs; wenn der Benutzer eine Stadt auswählt, wird das Dropdown-Menü darunter erneut generiert, um alle Landkreise in der Stadt anzuzeigen, wobei die Kreisnamen als Optionen im Dropdown-Menü angezeigt werden.

Angesichts der Idee, diese Funktion zu implementieren, können wir einige JavaScript-Bibliotheken verwenden, um die Codierungseffizienz zu verbessern, wie z. B. jQuery und andere Bibliotheken.

2. Implementierungsmethode

1. Komponentenstruktur

Bevor wir diese Funktion implementieren, müssen wir zunächst eine Komponentenstruktur erstellen. Die Komponentenstruktur kann je nach tatsächlichem Bedarf variieren. Hier verwenden wir eine gängigere Methode zur Implementierung, wie unten gezeigt:

<div>
  <select id="province">
    <option value="">请选择省份</option>
  </select>

  <select id="city">
    <option value="">请选择城市</option>
  </select>

  <select id="district">
    <option value="">请选择区域</option>
  </select>
</div>

In dieser Komponentenstruktur definieren wir zunächst drei Dropdown-Menükomponenten, die „Provinz“ entsprechen. „Stadt“ und „Region“. Hier legen wir jeweils die ID-Attribute für sie fest, um nachfolgende Vorgänge zu erleichtern.

2. Provinzdaten

Bevor wir die Provinz-Mehrfachauswahlfunktion implementieren, müssen wir zunächst die Provinzdaten vorbereiten, das heißt, alle Provinznamen in einem Array speichern, damit der Benutzer beim Rendern der Provinz eine Auswahl treffen kann Dropdown-Menü. Zur Vereinfachung der Demonstration definieren wir hier direkt ein Array zum Speichern von Provinzdaten.

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

Im obigen Code definieren wir ein Provinz-Array, das alle Provinzen und ihre Werte enthält. Dieser Wert wird zur Unterscheidung der einzelnen Provinzen verwendet.

3. Rendern Sie das Provinz-Dropdown-Menü

Nachdem wir die Provinzdaten haben, müssen wir das Provinz-Dropdown-Menü über JavaScript-Code rendern. Wir können diesen Vorgang durch Bibliotheken wie jQuery erreichen.

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);
}

Mit dem obigen Codeausschnitt können wir die Provinzdaten im Provinz-Dropdown-Menü rendern. Hier verwenden wir eine for-Schleife zum Durchlaufen und fügen dann die Durchlaufergebnisse in Form von in das Provinz-Dropdown-Menü ein.

4. Dropdown-Menü „Stadt“ rendern

Nachdem der Benutzer eine Provinz ausgewählt hat, müssen wir alle Städte in der Provinz basierend auf der aktuell ausgewählten Provinz dynamisch generieren. Die Implementierung dieser Operation erfordert auch die Verwendung von Bibliotheken wie jQuery. Die Implementierung dieses Vorgangs muss in zwei Schritte unterteilt werden: Der erste Schritt besteht darin, die aktuell ausgewählte Provinz abzurufen. Der zweite Schritt besteht darin, basierend auf den Provinzinformationen dynamisch ein Dropdown-Menü für die Stadt zu generieren. Die spezifische Operation ist wie folgt:

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);
}

In diesem Codeausschnitt definieren wir zunächst die Stadtdaten, die alle Städte und ihre Wertwerte umfassen. Während des Durchlaufens der Stadtdaten verwenden wir dann die if-Anweisung, um zu bestimmen, ob das aktuell durchquerte Element zur aktuell ausgewählten Provinz gehört. Wenn dies der Fall ist, wird es im Dropdown-Menü der Stadt gerendert.

5. Dropdown-Menü für Bezirke und Landkreise rendern

Nachdem wir die vom Benutzer ausgewählte Stadt erhalten haben, müssen wir alle Bezirke und Landkreise in der Stadt basierend auf der aktuell ausgewählten Stadt dynamisch generieren. Der Code zum Implementieren dieser Operation lautet wie folgt:

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);
}

In diesem Codeausschnitt definieren wir zunächst die Bezirks- und Kreisdaten, die alle Bezirke und Kreise sowie deren Werte umfassen. Während des Durchlaufens der Bezirks- und Kreisdaten wird dann auch die if-Anweisung verwendet, um zu bestimmen, ob das aktuell durchquerte Element zur aktuell ausgewählten Stadt gehört. Wenn dies der Fall ist, wird es im Dropdown-Menü für Bezirk und Kreis gerendert.

6. Codezusammenfassung

Durch die Integration des obigen Codes können wir eine Mehrfachauswahl von Provinzen und Städten realisieren. Der vollständige Code lautet wie folgt:

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. Durch die Implementierung des obigen Codes können wir Holen Sie sich ein vollständiges Beispiel für die Mehrfachauswahl von Provinzen und Gemeinden ist in der folgenden Abbildung dargestellt:

Zu diesem Zeitpunkt haben wir die Implementierung der Mehrfachauswahlfunktion von Provinzen und Gemeinden abgeschlossen.

Im Allgemeinen ist es nicht schwierig, die Mehrfachauswahlfunktion von Provinzen und Städten zu implementieren. Zur Realisierung dieser Funktion sind nur einige einfache Codeoperationen erforderlich. In tatsächlichen Projekten müssen wir lediglich die Codestruktur entsprechend den spezifischen Anforderungen anpassen, um komplexere und umfangreichere Mehrfachauswahlfunktionen für Provinzen und Städte zu erreichen.

Das obige ist der detaillierte Inhalt vonJavascript implementiert die Mehrfachauswahl von Provinzen und Städten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!