<!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();
}