在 Web 应用中创建和管理地址

介绍

在这个项目中，你将学习如何在一个 Web 应用程序中创建新地址并管理地址。该项目涉及实现省 - 市级联下拉菜单、表单验证、标签样式设置以及新地址的渲染。

👀 预览

地址表单演示动图

🎯 任务

在这个项目中，你将学习：

如何使用 data.js 文件中的数据初始化省份下拉菜单
如何实现省 - 市级联下拉菜单功能
如何为标签列表中的标签添加点击事件，使选中的标签被激活而其他标签被停用
如何在保存新地址之前验证地址、联系人及电话号码字段
如何创建并将新地址列表项追加到地址列表中

🏆 成果

完成这个项目后，你将能够：

使用 JavaScript 操作 DOM
处理用户交互和事件
实现表单验证和数据处理
动态创建并追加 HTML 元素

设置项目结构

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── index.html
├── css
├── images
└── js
    ├── data.js
    └── index.js

其中：

index.html 是主页。
css 是样式文件的文件夹。
images 是图像文件夹。
js/data.js 是省市的数据。
js/index.js 是需要完成的 JavaScript 文件。

点击 WebIDE 右下角的“Go Live”按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新以查看页面。

实现省 - 市级联下拉菜单

在这一步中，你将学习如何实现省 - 市级联下拉菜单功能。

在 js/index.js 文件中找到 provincechange() 函数。
此函数负责在选择一个省份时更新城市下拉菜单。
首先，它使用 document.getElementById("param_province") 获取对所选省份下拉菜单元素的引用。
然后，它使用 document.getElementById("param_city") 获取对城市下拉菜单元素的引用。
接下来，它使用 selectedProvince.value 从省份下拉菜单中获取所选省份的索引。
然后，它使用所选省份的索引从 data.js 文件中的 towns 数组访问相应的城市。
最后，它将城市下拉菜单选项的长度设置为城市的数量，并循环遍历这些城市以设置每个下拉菜单选项的文本和值。

// 实现省 - 市级联下拉菜单。
function provincechange() {
  var selectedProvince = document.getElementById("param_province");
  var city = document.getElementById("param_city");
  var { value } = selectedProvince;
  var cities = towns[value];
  city.length = cities.length;
  for (var i = 0; i < cities.length; i++) {
    city.options[i].text = cities[i];
    city.options[i].value = i;
  }
}

为标签添加点击事件

在这一步中，你将学习如何为标签列表中的标签添加点击事件，该事件将激活所选标签的样式并停用其他标签。

在 js/index.js 文件中找到 addClick() 函数。
此函数负责为标签添加点击事件。
首先，它使用 document.querySelectorAll(".mark a") 获取对所有标签元素的引用。
然后，它获取对 param_mark 输入字段的引用，该字段将存储所选标签的索引。
接下来，它循环遍历标签元素并为每个元素添加一个点击事件监听器。
在事件监听器内部，它首先使用 labels.forEach((l) => l.classList.remove("active")) 从所有标签中移除 active 类。
然后，它使用 label.classList.add("active") 为被点击的标签添加 active 类。
最后，它将 param_mark 输入字段的值设置为被点击标签的索引。

function addClick() {
  var labels = document.querySelectorAll(".mark a");
  var input = document.getElementById("param_mark");

  labels.forEach((label, index) => {
    label.addEventListener("click", () => {
      labels.forEach((l) => l.classList.remove("active"));
      label.classList.add("active");
      input.value = index;
    });
  });
}

验证并保存地址信息

在这一步中，你将学习如何验证地址信息并将新地址保存到地址列表中。

在 js/index.js 文件中找到 saveInfo() 函数。
此函数负责验证输入字段并保存新地址。
首先，它获取省份、城市、地址、标签、姓名和电话号码输入字段的值。
然后检查省份、地址、姓名或电话号码字段是否为空。如果这些必填字段中的任何一个为空，它将显示一个警告对话框。
如果所有必填字段都已填写，它将创建一个新的列表项元素 (<li>) 并用地址信息填充它。
新的地址列表项包括标签（基于所选标签）、完整地址（省份和城市）、地址以及姓名和电话号码。
最后，它将新的地址列表项追加到 .address-list 元素，并调用 back() 函数重定向到地址管理页面。

function saveInfo() {
  var { value: provinceIdx, options: provinces } =
    document.getElementById("param_province");
  var { value: cityIdx, options: cities } =
    document.getElementById("param_city");
  var { value: address } = document.getElementById("param_address");
  var { value: markId } = document.getElementById("param_mark");
  var labelNodes = document.querySelectorAll(".mark a");
  var label = labelNodes[markId].text;
  var { value: name } = document.getElementById("param_name");
  var { value: phone } = document.getElementById("param_phone");

  if (provinceIdx === 0 || !address || !name || !phone) {
    document.querySelector(".warning-dialog").style.display = "block";
    return;
  }

  var addressListElement = document.querySelector(".address-list");
  var newAddressElement = document.createElement("li");
  newAddressElement.innerHTML = `
    <div class="show-area">
      <label class="school">${label}</label>
      <span>${provinces[provinceIdx].text}${cities[cityIdx].text}</span>
    </div>
    <div class="show-address">
      <span>${address}</span>
      <a><img src="./images/edit.png" /></a>
    </div>
    <div class="show-info">
      <span>${name}</span>
      <span>${phone}</span>
    </div>
  `;
  addressListElement.appendChild(newAddressElement);
  back();
}

通过执行这些步骤，你已在项目中成功实现了“添加新地址”功能。恭喜！

最终页面效果应如下所示：

图片描述

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升技能。

地址管理 Web 应用程序

介绍