【免费】城市三级联动纯js资源-CSDN文库

共2个文件

htm：1个

js：1个

需积分: 0 23 浏览量更新于2015-08-11 收藏 17KB RAR 举报

城市三级联动是网页开发中常见的功能，特别是在表单中填写地址时，用户通常需要选择国家、省份、城市，这样的交互可以提升用户体验，减少输入错误。在这个案例中，我们看到的"城市三级联动纯js"是一个使用JavaScript实现的解决方案，无需依赖任何外部库，如jQuery或其他框架。我们需要在HTML文件`demo.htm`中引入JavaScript文件`jsAddress.js`。这是通过在HTML的`<head>`或`<body>`部分添加`<script>`标签来完成的。例如： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>城市三级联动</title> <script src="jsAddress.js"></script> </head> <body>  </body> </html> ``` 接下来，我们要在HTML中编写`select`标签，用于展示城市的选择。通常，我们会创建三个`select`元素，分别对应国家、省份和城市。每个`select`的选择会触发一个事件，更新下一个级别的选择项。例如： ```html <select id="country" onchange="changeProvince()">  </select> <select id="province" disabled onchange="changeCity()">  </select> <select id="city" disabled>  </select> ``` 在`jsAddress.js`中，我们需要定义对应的JavaScript函数来处理这些事件。`changeProvince()`函数会在国家选择改变时更新省份选项，`changeCity()`则在省份选择改变时更新城市选项。这些函数可能包含以下内容： ```javascript // 数据源，包含国家、省份、城市的关联数据 var addressData = { // 数据结构：国家 -> 省份 -> 城市 }; function changeProvince() { var country = document.getElementById('country').value; var provinceSelect = document.getElementById('province'); provinceSelect.innerHTML = ''; // 清空省份选项 var provinces = addressData[country]; // 获取当前国家的省份数据 for (var i in provinces) { var option = document.createElement('option'); option.value = i; option.textContent = i; provinceSelect.appendChild(option); } provinceSelect.disabled = false; // 启用省份选择 provinceSelect.onchange(); // 触发一次省份变化，初始化城市 } function changeCity() { var province = document.getElementById('province').value; var citySelect = document.getElementById('city'); citySelect.innerHTML = ''; // 清空城市选项 var cities = addressData[currentCountry][province]; for (var i in cities) { var option = document.createElement('option'); option.value = i; option.textContent = i; citySelect.appendChild(option); } citySelect.disabled = false; // 启用城市选择 } ``` 为了使这个功能正常工作，`addressData`对象需要包含完整的城市数据，格式通常是键值对的嵌套结构。例如，中国的数据可能是： ```javascript var addressData = { "中国": { "北京市": ["东城区", "西城区", "朝阳区", ...], "上海市": ["黄浦区", "徐汇区", "长宁区", ...], ... }, ... }; ``` 确保在页面加载完成后初始化国家选择。这可以通过在`window.onload`或`document.readyState`事件中调用`changeProvince()`实现： ```javascript window.onload = function() { changeProvince(); }; ``` 以上就是"城市三级联动纯js"的基本实现思路。这个功能不仅适用于网页表单，还可以应用于各种需要地理信息选择的场景，例如在线购物、地图应用等。通过纯JavaScript实现，我们可以灵活地控制代码和数据，适应不同的项目需求。

收起资源包目录