<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> select { width: 20%; height: 25px; margin: 20px; } input { margin-left: 20px; } </style> </head> <body> <select class="prince" onchange="province(value)"> <option class="prince">-请选择省-</option> </select> <select class="citys" onchange="town(value)"> <option class="city" placeholder="请选择市">-请先选择省-</option> </select> <select class="countrys"> <option class="country" placeholder="请选择县">-请先选择省-</option> </select><br> <input type="text" placeholder="请输入详细地址" class="adds"> <button onclick="displayFullAddress()">确定</button> <div id="fullAddress"></div> <script src="js/sanjld.js"></script> <!-- 三个下拉菜单分别用于选择省、市和县。 一个输入框用于输入详细地址 一个输入框用于输入详细地址 当下拉菜单或输入框的内容发生变化时，获取当前值并拼接成完整地址，然后显示在页面上 分别绑定在下拉菜单和输入框上onchange 和 oninput 事件，确保每次用户选择或输入内容时都会触发函数 --> </body> </html>
[{ "prince": "河南省", "citys": [{ "city": "鹤壁市", "conturys": [{ "contury": "淇滨区" }, { "contury": "浚县" }] }, { "city": "新乡市", "conturys": [{ "contury": "红旗区" }, { "contury": "牧野区" }, { "contury": "卫滨区" }] }] }, { "prince": "河北省", "citys": [{ "city": "石家庄市", "conturys": [{ "contury": "桥西区" }, { "contury": "新华区" }] }, { "city": "张家口市", "conturys": [{ "contury": "万全区" }, { "contury": "下花园区" }, { "contury": "宣化区" }] }] }]
// 创建 XMLHttpRequest 对象 let xhr = new XMLHttpRequest(); // 使用 open 方法指定要请求的地址、类型和方式 xhr.open('get', 'js/sanjld.json', true); // 发送数据 xhr.send(); // 绑定 onreadystatechange 事件，判断 readyState 和 status 的状态 xhr.onreadystatechange = function() { // 第一个判断到哪一步，交互流程，有 5 个阶段 从0开始 4表示交互流程完毕 200是状态请求成功 if (xhr.readyState == 4 && xhr.status == 200) { // 将JSON中的数据转化为对象 接收服务器数据 一般为字符串 let text = xhr.responseText; console.log(text); data = JSON.parse(text); console.log(data); item(data) } }; let prince = document.getElementsByClassName('prince')[0]; console.log(prince); let citys = document.getElementsByClassName('citys')[0]; console.log(citys); let countrys = document.getElementsByClassName('countrys')[0]; console.log(countrys); // item(data) 函数： //接收一个包含省份数据的数组 data 作为参数。 // 遍历数组中的省份数据，将每个省份的名称添加到一个字符串中，并生成对应的 option 标签。 // 将生成的字符串渲染到名为 prince 的 HTML 元素中。 // province(w) 函数 // 接收一个表示选中省份索引的参数 w。 // 初始化城市和县的选择框内容为空。 // 遍历选中省份对应的城市数据，生成每个城市的 option 标签，并将其渲染到名为 citys 的 HTML 元素中。 // 同时将县的选择框内容设置为“请先选择县”。 // town(a) 函数： // 接收一个表示选中城市索引的参数 a。 // 初始化县级选择框的内容为空。 // 遍历选中城市对应的县级数据，生成每个县的 option 标签，并将其渲染到名为 countrys 的 HTML 元素中。 // 获取到省市县的数据 let声明新的变量 在文档中通过类名获取数据 function item(data) { console.log(data); // 初始化一个字符串 str，值为 "-请选择省-" let str = `<option class="city">-请选择省-</option>`; // 下标小于数据长度时，循环遍历数组 for (let i = 0; i < data.length; i++) { console.log(data[i]); // 拼接第一个输入框内容，将数据中的省份名称添加到 str 中 str += ` <option value="${i}">${data[i].prince}</option>`; } // 渲染数据到名为 prince 的元素中 prince.innerHTML = str; }; // 市级数据渲染 function province(w) { console.log(w); // 初始化一个字符串 stre，值为 "-请选择市-" let stre = `<option class="city">-请选择市-</option>`; // 初始化一个字符串 sttrs，值为 "-请先选择县-" let sttrs = `<option class="country">-请先选择县-</option>`; // 遍历选中省份对应的城市数据 for (let i = 0; i < data[w].citys.length; i++) { // 将城市信息添加到 stre 中作为 option 标签的值和文本 stre += `<option value="${i}">${data[w].citys[i].city}</option>`; abc = data[w]; // 保存当前省份的数据 } // 重新渲染城市选择框的数据 citys.innerHTML = stre; // 重新渲染县级选择框的数据 countrys.innerHTML = sttrs; }; // 县级数据渲染 function town(a) { console.log(a); // 初始化一个字符串 sttrs，值为 "-请选择县-" let sttrs = `<option class="country">-请选择县-</option>`; // 遍历选中城市对应的县级数据 for (let i = 0; i < abc.citys[a].conturys.length; i++) { // 将县级信息添加到 sttrs 中作为 option 标签的值和文本 sttrs += `<option value="country">${abc.citys[a].conturys[i].contury}</option>`; } // 重新渲染县级选择框的数据 countrys.innerHTML = sttrs; }; // 获取页面元素 let provinceSelect = document.getElementsByClassName('prince')[0]; let citySelect = document.getElementsByClassName('citys')[0]; let countrySelect = document.getElementsByClassName('countrys')[0]; let detailAddressInput = document.getElementsByClassName('adds')[0]; let fullAddressElement = document.getElementById('fullAddress'); // 监听确定按钮的点击事件 document.getElementById('confirmBtn').addEventListener('click', displayFullAddress); // 拼接并显示完整地址 function displayFullAddress() { // 从省份选择框中获取当前选中的选项，并提取其文本内容（省份名称） let province = provinceSelect.options[provinceSelect.selectedIndex].text; // 从市区选择框中获取当前选中的选项，并提取其文本内容（市区名称） let city = citySelect.options[citySelect.selectedIndex].text; // 从县级选择框中获取当前选中的选项，并提取其文本内容（县级名称） let country = countrySelect.options[countrySelect.selectedIndex].text; // 获取详细地址输入框中的用户输入内容 let detailAddress = detailAddressInput.value; let fullAddress = `${province} ${city} ${country} ${detailAddress}`; fullAddressElement.innerText = fullAddress.trim(); }
