织梦手机网站教程视频,盐城哪里帮助公司建网址,石家庄ui设计公司,房产网站开发报价引言
在网页中#xff0c;经常会遇到需要用户选择地区的场景#xff0c;如注册表单、地址填写等。为了提供更好的用户体验#xff0c;我们可以实现一个三级联动的地区选择器#xff0c;让用户依次选择省份、城市和地区。 效果展示#xff1a;
只有先选择省份后才可以选择…引言
在网页中经常会遇到需要用户选择地区的场景如注册表单、地址填写等。为了提供更好的用户体验我们可以实现一个三级联动的地区选择器让用户依次选择省份、城市和地区。 效果展示
只有先选择省份后才可以选择市和区 实现思路
整体实现思路是通过 JavaScript 异步请求一个包含地区数据的 JSON 文件将数据解析后根据用户的选择动态更新下拉框选项最终实现三级联动效果。当用户完成地区选择后会弹出一个提示框显示所选的地区信息提示框会在 2 秒后自动消失。 HTML 结构搭建
!DOCTYPE html
html
headmeta charsetutf-8title/titlestyle#showPlace {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);color: white;align-items: center;z-index: 9999;text-align: center;line-height: 500px;display: none;}#textCenter {text-align: center;}#textCenter select {height: 50px;width: 200px;text-align: center;font-size: 20px;}/style
/head
bodydiv idtextCenterselect idprovince onchangecityData()option---请选择省---/option/selectselect idcity onchangeregionData()option---请先选择省---/option/selectselect idregion onchangeshowAlert()option---请先选择省---/option/select/divdiv idshowPlaceh1您所在的地区为/h1/divscript// ... JavaScript 代码 .../script
/body
创建了三个 select 元素分别用于选择省份、城市和地区并为每个 select 元素设置了初始提示选项。onchange 事件分别绑定了相应的 JavaScript 函数用于在用户选择选项时更新下拉框内容或显示提示框。 JavaScript 逻辑实现 1.声明一个变量 data用于存储从 ./js/threeGet.json 文件中获取的地区数据。此时变量未赋值值为 undefined。
let data; 2. 这部分代码创建了一个 XMLHttpRequest 对象以异步 GET 请求的方式从 ./js/threeGet.json 文件获取数据发送请求后监听其状态变化当请求完成且响应状态码为 200 时将响应的 JSON 文本解析为 JavaScript 对象随后调用 showProvince 函数对解析后的数据进行渲染处理。 let xhr new XMLHttpRequest();xhr.open(get, ./js/threeGet.json, true);xhr.send();xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {let text xhr.responseText;// console.log(text);data JSON.parse(text);// console.log(data);// 渲染函数showProvince(data);// console.log(data);}}; 3.分别通过 document.getElementById 方法获取 HTML 文档中 id 为 province、city、region 和 showPlace 的元素并将它们存储在对应的变量中。
let province document.getElementById(province);
let city document.getElementById(city);
let region document.getElementById(region);
let showPlace document.getElementById(showPlace); 4.渲染省份函数定义一个名为 showProvince 的函数用于渲染省份下拉框的选项。初始化变量 provinceStr并赋值为一个禁用且默认选中的 option 元素作为提示信息。使用 for 循环遍历 data 数组将每个省份的名称拼接成 option 元素字符串并添加到 provinceStr 中。将拼接好的 option 元素字符串赋值给 province 下拉框的 innerHTML 属性从而更新下拉框的选项。
function showProvince(data) {let provinceStr option disabled selected--请选择省份--/option;for (let i 0; i data.length; i) {provinceStr option ${data[i].province}/option;}province.innerHTML provinceStr;
} 5.渲染市级函数定义一个名为 cityData 的函数该函数会在用户选择省份后触发通过 onchange 事件。初始化变量 cityStr 和 regionStr分别用于存储城市和地区下拉框的选项字符串并设置默认的提示信息。使用外层 for 循环遍历 data 数组检查每个省份是否与用户选择的省份相同。如果找到匹配的省份则使用内层 for 循环遍历该省份下的所有城市并将城市名称拼接成 option 元素字符串添加到 cityStr 中。最后将 cityStr 赋值给 city 下拉框的 innerHTML 属性更新城市下拉框的选项将 regionStr 赋值给 region 下拉框的 innerHTML 属性重置地区下拉框的选项为提示信息。
function cityData() {let cityStr option value disabled selected--请选择城市--/option;let regionStr option value disabled selected--请先选择城市后选择地区--/option;for (let i 0; i data.length; i) {if (data[i].province province.value) {for (let s 0; s data[i].child.length; s) {cityStr option${ data[i].child[s].city}/option;}}}city.innerHTML cityStr;region.innerHTML regionStr;
} 6.渲染区级函数定义一个名为 regionData 的函数该函数会在用户选择城市后触发通过 onchange 事件。初始化变量 regionStr用于存储地区下拉框的选项字符串使用三层嵌套的 for 循环外层 for 循环遍历 data 数组找到用户选择的省份。第二层 for 循环遍历该省份下的所有城市找到用户选择的城市。内层 for 循环遍历该城市下的所有地区并将地区名称拼接成 option 元素字符串添加到 regionStr 中。最后将 regionStr 赋值给 region 下拉框的 innerHTML 属性更新地区下拉框的选项。
function regionData() {let regionStr option value disabled selected--请选择地区--/option;for (let i 0; i data.length; i) {if (data[i].province province.value) {for (let s 0; s data[i].child.length; s) {if (data[i].child[s].city city.value) {for (let c 0; c data[i].child[s].child.length; c) {regionStr option${data[i].child[s].child[c]}/option;}}}}}region.innerHTML regionStr;
} 7.地区信息框 定义一个名为 showAlert 的函数该函数会在用户选择地区后触发通过 onchange 事件。构建一个包含用户所选省份、城市和地区信息的 HTML 字符串 str并将地区信息用红色显示。将 str 赋值给 showPlace 元素的 innerHTML 属性更新提示框的内容。将 showPlace 样式设置为 block显示出来。使用 setTimeout 函数设置一个定时器在 2000 毫秒后将 showPlace 元素的样式设置为 none隐藏起来。
function showAlert() {let str h1您所在的地区为span stylecolor: red;${province.value} ${city.value} ${region.value}/span/h1;showPlace.innerHTML str;showPlace.style.display block;setTimeout(function() {showPlace.style.display none;}, 2000)
}
