Javascript implémente une sélection multiple de provinces et de villes

Avec le développement accéléré de l'ère de l'information, Internet est devenu un élément essentiel de nos vies. Il est devenu une habitude nécessaire pour les gens d'utiliser Internet via des ordinateurs, des téléphones mobiles et d'autres appareils dans leur vie quotidienne. Dans la conception Web, la fonction de sélection multiple de provinces et de villes est souvent impliquée, ce qui nécessite l'utilisation de JavaScript pour la mettre en œuvre.

1. Idées de mise en œuvre

Dans le processus de réalisation de la fonction de sélection multiple des provinces et des villes, nous devons utiliser plusieurs menus déroulants, chaque menu déroulant correspond à un niveau de région, le menu déroulant du niveau supérieur est destiné à la sélection de la province, et les options du menu déroulant sont les noms des provinces, lorsque l'utilisateur sélectionne une province, le menu déroulant inférieur sera généré dynamiquement ; pour afficher toutes les zones urbaines de la province, et le nom de la ville est le nom de l'option du menu déroulant lorsque l'utilisateur sélectionne une ville, le menu déroulant ci-dessous sera à nouveau généré pour afficher tous les comtés de la ville ; , et les noms des comtés sont les options du menu déroulant.

Compte tenu de l'idée d'implémenter cette fonction, nous pouvons utiliser certaines bibliothèques JavaScript pour améliorer l'efficacité du codage, comme jQuery et d'autres bibliothèques.

2. Méthode d'implémentation

1. Structure du composant

Avant d'implémenter cette fonction, nous devons d'abord construire un composant structure. La structure des composants peut varier en fonction des besoins réels. Ici, nous utilisons une manière plus courante de la mettre en œuvre, comme indiqué ci-dessous :

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

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

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

Dans cette structure de composants, nous définissons d'abord trois menus déroulants auxquels correspondent les composants de menu. respectivement « province », « ville » et « région ». Ici, nous définissons respectivement leurs attributs id afin de faciliter les opérations ultérieures.

2. Données provinciales

Avant de mettre en œuvre la fonction de sélection multiple de la province, nous devons d'abord préparer les données de la province, c'est-à-dire stocker toutes les noms de province dans un tableau, afin que les utilisateurs puissent faire des sélections lors du rendu du menu déroulant de province. Pour faciliter la démonstration, nous définissons ici directement un tableau pour stocker les données de province.

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

Dans le code ci-dessus, nous définissons un tableau de provinces, qui contient toutes les provinces et leurs valeurs. Cette valeur est utilisée pour distinguer chaque province.

3. Rendu du menu déroulant de la province

Après avoir obtenu les données de la province, nous devons ensuite afficher le menu déroulant de la province via Code JavaScript. Nous pouvons réaliser cette opération grâce à des bibliothèques telles que jQuery.

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

Avec l'extrait de code ci-dessus, nous pouvons afficher les données de la province dans le menu déroulant de la province. Ici, nous utilisons une boucle for pour parcourir, puis insérons les résultats du parcours dans le menu déroulant de province sous la forme de balises

4. Menu déroulant de la ville de rendu

Lorsque l'utilisateur sélectionne une province, nous devons la générer dynamiquement en fonction de la province actuellement sélectionnée. Toutes les villes de la province. La mise en œuvre de cette opération nécessite également l'utilisation de bibliothèques telles que jQuery. La mise en œuvre de cette opération doit être divisée en deux étapes : la première étape consiste à obtenir la province actuellement sélectionnée ; la deuxième étape consiste à générer dynamiquement un menu déroulant de ville basé sur les informations sur la province. L'opération spécifique est la suivante :

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

Dans cet extrait de code, nous définissons d'abord les données de la ville, qui incluent toutes les villes et leurs valeurs. Ensuite, pendant le processus de parcours des données de la ville, nous utilisons l'instruction if pour déterminer si l'élément actuellement parcouru appartient à la province actuellement sélectionnée. Si tel est le cas, il sera affiché dans le menu déroulant de la ville.

5. Menu déroulant District et comté de rendu

Après avoir obtenu la ville sélectionnée par l'utilisateur, nous devons générer dynamiquement la ville en fonction de la ville actuellement sélectionnée Tous les districts et comtés de la ville. Le code pour mettre en œuvre cette opération est le suivant :

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

Dans ce segment de code, nous définissons d'abord les données du district et du comté, y compris tous les districts et comtés et leurs valeurs. Ensuite, pendant le processus de parcours des données du district et du comté, l'instruction if est également utilisée pour déterminer si l'élément actuellement parcouru appartient à la ville actuellement sélectionnée. Si c'est le cas, il est affiché dans le menu déroulant du district et du comté.

6. Résumé du code

En intégrant les codes ci-dessus ensemble, nous pouvons réaliser plusieurs sélections de provinces et de villes. Le code complet est le suivant : #🎜 🎜#

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. Effet de mise en œuvre

Grâce à la mise en œuvre du code ci-dessus, nous pouvons obtenir un exemple complet de sélection multiple de provinces et de villes, comme le montre la figure ci-dessous :

#🎜🎜 #

À ce stade, nous avons terminé la mise en œuvre de la fonction de multi-sélection pour les provinces et les villes.

En général, il n'est pas difficile de mettre en œuvre la fonction de sélection multiple des provinces et des villes. Il vous suffit d'effectuer quelques opérations de code simples pour réaliser cette fonction. Dans les projets réels, il nous suffit d'ajuster de manière appropriée la structure du code en fonction des besoins spécifiques pour obtenir des fonctions de sélection multiple plus complexes et plus riches pour les provinces et les villes.

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!