<!DOCTYPE html>
<html>
<head>
<title>四级联动完整示例</title>
</head>
<body>
<!-- 四级下拉框 -->
<select id="province"><option value="">请选择省份</option></select>
<select id="city"><option value="">请选择城市</option></select>
<select id="district"><option value="">请选择区县</option></select>
<select id="street"><option value="">请选择街道</option></select>
<script>
// 完整数据（省-市-区-街道）
const regionData = [
{
id: 1,
name: "广东省",
children: [
{
id: 11,
name: "广州市",
children: [
{
id: 1101,
name: "天河区",
children: [
{ id: 110101, name: "石牌街道" },
{ id: 110102, name: "天河南街道" }
]
},
{
id: 1102,
name: "越秀区",
children: [
{ id: 110201, name: "北京街道" },
{ id: 110202, name: "人民街道" }
]
}
]
}
]
},
{
id: 2,
name: "浙江省",
children: [
{
id: 21,
name: "杭州市",
children: [
{
id: 2101,
name: "西湖区",
children: [
{ id: 210101, name: "灵隐街道" },
{ id: 210102, name: "北山街道" }
]
}
]
}
]
}
];
// ==================== 核心函数 ====================
// 初始化第一级（省份）
function initFirstLevel() {
const provinceSelect = document.getElementById('province');
provinceSelect.innerHTML = '<option value="">请选择省份</option>';
regionData.forEach(province => {
const option = document.createElement('option');
option.value = province.id;
option.textContent = province.name;
provinceSelect.appendChild(option);
});
}
// 更新下级选项（通用方法）
function updateNextLevel(parentLevel, childLevel, parentId) {
const childSelect = document.getElementById(childLevel);
childSelect.innerHTML = `<option value="">请选择${getLevelName(childLevel)}</option>`;
// 根据父级ID查找子级数据
let childData = [];
if (parentLevel === 'province') {
childData = regionData.find(p => p.id === parentId)?.children || [];
} else if (parentLevel === 'city') {
const province = regionData.find(p => p.children?.some(c => c.id === parentId));
childData = province?.children?.find(c => c.id === parentId)?.children || [];
} else if (parentLevel === 'district') {
const province = regionData.find(p => p.children?.some(c => c.children?.some(d => d.id === parentId)));
const city = province?.children?.find(c => c.children?.some(d => d.id === parentId));
childData = city?.children?.find(d => d.id === parentId)?.children || [];
}
// 填充子级选项
childData.forEach(item => {
const option = document.createElement('option');
option.value = item.id;
option.textContent = item.name;
childSelect.appendChild(option);
});
}
// 设置默认选中（核心方法）
function setDefaultSelected(parentId, childIds = []) {
if (!parentId) return;
// 设置省份
document.getElementById('province').value = parentId;
updateNextLevel('province', 'city', parentId);
// 递归设置子级
let currentParentId = parentId;
const levels = ['city', 'district', 'street'];
for (let i = 0; i < childIds.length; i++) {
const childId = childIds[i];
const currentLevel = levels[i];
const nextLevel = levels[i + 1];
document.getElementById(currentLevel).value = childId;
if (nextLevel) {
updateNextLevel(currentLevel, nextLevel, childId);
}
currentParentId = childId;
}
}
// ==================== 辅助函数 ====================
function getLevelName(level) {
const map = { province: '省份', city: '城市', district: '区县', street: '街道' };
return map[level] || '';
}
// ==================== 事件绑定 ====================
document.getElementById('province').addEventListener('change', (e) => {
updateNextLevel('province', 'city', parseInt(e.target.value));
document.getElementById('district').innerHTML = '<option value="">请选择区县</option>';
document.getElementById('street').innerHTML = '<option value="">请选择街道</option>';
});
document.getElementById('city').addEventListener('change', (e) => {
updateNextLevel('city', 'district', parseInt(e.target.value));
document.getElementById('street').innerHTML = '<option value="">请选择街道</option>';
});
document.getElementById('district').addEventListener('change', (e) => {
updateNextLevel('district', 'street', parseInt(e.target.value));
});
// ==================== 初始化 ====================
document.addEventListener('DOMContentLoaded', () => {
// 1. 初始化省份
initFirstLevel();
// 2. 设置默认选中（两个参数：父ID + 子ID数组）
setDefaultSelected(2, [21, 2101, 210102]); // 广东省 -> 广州市 -> 天河区 -> 石牌街道
// 其他示例：
// setDefaultSelected(2, [21, 2101, 210101]); // 浙江省 -> 杭州市 -> 西湖区 -> 灵隐街道
});
</script>
</body>
</html>
最新评论