使用js写的三级联动 有两个城市:河南,广东;
HTML部分 写一个框架 通过js渲染 就可以不用HTML的内容。
<body>
<select class="sheng" onchange="province()">
<option class="dart">-请选择省-</option>
</select>
<select class="shi" onchange="town()">
<option class="city" placeholder="请选择市">-请先选择省-</option>
<!-- <option value="安阳">安阳</option>
<option value="新乡">新乡</option>
<option value="洛阳">洛阳</option> -->
</select>
<select class="xian">
<option class="area" placeholder="请选择县">-请先选择省-</option>
<!-- <option value="文峰区">文峰区</option>
<option value="北关区">北关区</option>
<option value="殷都区">殷都区</option>
<option value="龙安区">龙安区</option> -->
</select>
<script src="js/index.js"></script>
</body>
CSS部分
<style>
select {
width: 20%;
height: 25px;
margin: 20px;
}
</style>
json假数据部分
[{
"dart": "河南省",
"child": [{
"city": "安阳市",
"child": [{
"area": "文峰区"
}, {
"area": "北关区"
}, {
"area": "殷都区"
}, {
"area": "龙安区"
}]
}, {
"city": "新乡市",
"child": [{
"area": "新乡县"
}, {
"area": "延津县"
}, {
"area": "原阳县"
}, {
"area": "封丘县"
}, {
"area": "长垣县"
}]
}, {
"city": "洛阳市",
"child": [{
"area": "洛龙区"
}, {
"area": "偃师市"
}, {
"area": "汝阳县"
}, {
"area": "吉利区"
}, {
"area": "新安县"
}]
}]
}, {
"dart": "广东省",
"child": [{
"city": "广州市",
"child": [{
"area": "海珠"
}, {
"area": "荔湾"
}, {
"area": "天河"
}, {
"area": "白云"
}]
}, {
"city": "深圳市",
"child": [{
"area": "宝安"
}, {
"area": "龙岗"
}, {
"area": "龙华"
}, {
"area": "坪山"
}, {
"area": "南山"
}]
}]
}]
JS部分 代码及伪代码
// let声明变量为总数据
let data;
// 创建新的XMLHttpRequest(可扩展超文本传输请求)对象
let xhr = new XMLHttpRequest();
// 使用open方法指定要请求的地址 路径 类型及方式
xhr.open('get', 'js/index.json', true);
// 发送数据
xhr.send();
// 绑定onreadystatechange(定义响应执行函数)事件,判断readyState和status的状态
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 响应文本(返回的数据)
let text = xhr.responseText;
console.log(text);
// 接收数据,通过 json 转换使用 把json数据转化为数据或对象
data = JSON.parse(text);
console.log(data);
// 渲染函数
item(data);
}
};
// 获取到省 市 县的数据 let声明新的变量 在文档中通过类名获取数据
let sheng = document.getElementsByClassName('sheng')[0];
console.log(sheng);
let shi = document.getElementsByClassName('shi')[0];
console.log(shi);
let xian = document.getElementsByClassName('xian')[0];
console.log(xian);
// 省级数据渲染
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]);
// 拼接第一个输入框内容 将dart的数据添加到str中
str += `
<option value="${i}">${data[i].dart}</option>`;
}
// 渲染数据
sheng.innerHTML = str;
};
// 市级数据渲染
function province() {
console.log(sheng.value);
// 初始化一个字符串 stre,值为 "-请选择市-"
let stre = `<option class="city" >-请选择市-</option>`;
// 初始化一个字符串 stres,值为 "-请先选择市-"
let stres = `<option class="area" >-请先选择市-</option>`;
// for循环遍历数据 对于 data[sheng.value].child 中的每一个子元素:
for (let i = 0; i < data[sheng.value].child.length; i++) {
//将子元素的 city 添加到 stre 中,作为 option 标签的值和文本
stre += `<option value="${i}">${data[sheng.value].child[i].city}</option>`;
console.log(data[sheng.value].child[i]);
};
// 重新渲染stre的数据
shi.innerHTML = stre;
// 重新渲染stres的数据
xian.innerHTML = stres;
};
// 县级数据渲染
function town() {
// 初始化一个字符串 stres,值为 "-请选择县-"
let stres = `<option class="area" >-请选择县-</option>`;
// 对于 data[sheng.value].child[shi.value].child 中的每一个子元素:
for (let i = 0; i < data[sheng.value].child[shi.value].child.length; i++) {
console.log(data[sheng.value].child[shi.value].child[i].area);
// 将子元素的 area 添加到 stres 中,作为 option 标签的值和文本
stres += `<option value="area">${data[sheng.value].child[shi.value].child[i].area}</option>`;
}
// 重新渲染stres的数据
xian.innerHTML = stres;
};
河南,广东三级联动完成