Comment utiliser JavaScript pour obtenir un effet de lien dans une liste déroulante ?

Comment utiliser JavaScript pour obtenir un effet de lien de liste déroulante ?

Lors du développement de pages Web, les liens vers des listes déroulantes sont un effet interactif courant. Il modifie dynamiquement le contenu de l'option d'une autre liste déroulante en sélectionnant une option dans une liste déroulante, réalisant ainsi un lien entre les deux. Cet article expliquera comment utiliser JavaScript pour obtenir l'effet de liaison des listes déroulantes et joindra des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons créer deux listes déroulantes et leur ajouter des attributs d'identification afin que JavaScript puisse les sélectionner. Ce qui suit est un exemple simple de structure HTML :

<select id="province">
  <option value="0">请选择省份</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
</select>

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

2. Code JavaScript

Ensuite, nous utilisons JavaScript pour implémenter le lien de la liste déroulante. L'idée spécifique d'implémentation est la suivante :

• Lorsque l'option de la première liste déroulante change, l'événement onchange est déclenché.
• Dans l'événement onchange, les options de la deuxième liste déroulante sont générées dynamiquement en fonction de la valeur de l'option de la première liste déroulante.
• Si vous sélectionnez l'option « Veuillez sélectionner une province », la deuxième liste déroulante effacera les options.
• Si vous sélectionnez une province spécifique, les options de ville correspondantes seront générées dans la deuxième liste déroulante en fonction de la valeur de la province.

Ce qui suit est un exemple de code JavaScript spécifique :

// 获取下拉框元素
const provinceDropdown = document.getElementById('province');
const cityDropdown = document.getElementById('city');

// 给第一个下拉框添加 onchange 事件
provinceDropdown.addEventListener('change', function() {
  // 获取选择的省份值
  const selectedProvince = provinceDropdown.value;

  // 根据选择的省份值生成相应的城市选项
  if (selectedProvince === "1") {
    // 清空第二个下拉框的选项
    cityDropdown.innerHTML = '';

    // 添加北京的选项
    const option = document.createElement('option');
    option.value = '1';
    option.text = '北京';
    cityDropdown.add(option);
  } else if (selectedProvince === "2") {
    // 清空第二个下拉框的选项
    cityDropdown.innerHTML = '';

    // 添加上海的选项
    const option = document.createElement('option');
    option.value = '2';
    option.text = '上海';
    cityDropdown.add(option);
  } else if (selectedProvince === "3") {
    // 清空第二个下拉框的选项
    cityDropdown.innerHTML = '';

    // 添加广东的选项
    const option = document.createElement('option');
    option.value = '3';
    option.text = '广东';
    cityDropdown.add(option);
  } else {
    // 选择了“请选择省份”，清空第二个下拉框的选项
    cityDropdown.innerHTML = '';
  }
});

3. Affichage de l'effet

Enfin, nous visualisons l'effet dans le navigateur. La sélection de l’option province dans la première liste déroulante modifiera dynamiquement l’option ville dans la deuxième liste déroulante. Si l'option « Veuillez sélectionner une province » est sélectionnée, les options de la deuxième liste déroulante seront effacées.

Grâce aux étapes ci-dessus, nous avons utilisé avec succès JavaScript pour obtenir l'effet de lien de la liste déroulante.

Résumé :

Cet article explique comment utiliser JavaScript pour obtenir l'effet de liaison de liste déroulante et fournit une explication avec des exemples de code spécifiques. En maîtrisant cette méthode, vous pouvez ajouter plus d'interactivité et de dynamique aux pages Web et améliorer l'expérience utilisateur. J'espère que cet article vous aidera !

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!