// 地址表单页面JavaScript功能
// 全局变量,避免重复初始化
let addressFormInitialized = false;
// 页面完全加载后初始化
window.addEventListener('load', function() {
console.log('=== 地址表单初始化开始 ===');
// 显示调试信息
document.getElementById('debugAlert').style.display = 'block';
// 检查数据是否加载
if (typeof cityData === 'undefined') {
console.error('❌ cityData 未加载');
document.getElementById('debugInfo').innerHTML = '❌ 地址数据加载失败';
showAlert('地址数据加载失败,请刷新页面重试', 'error');
return;
}
console.log('✅ cityData 已加载,省份数量:', Object.keys(cityData).length);
document.getElementById('debugInfo').innerHTML = '✅ 地址数据已加载,省份数量: ' + Object.keys(cityData).length + '';
// 避免重复初始化
if (addressFormInitialized) {
console.log('地址表单已初始化,跳过');
return;
}
addressFormInitialized = true;
// 初始化省份列表
initializeProvinces();
// 设置事件监听器
setupEventListeners();
// 如果是编辑模式,设置初始值
const savedProvince = document.getElementById('provinceValue').value;
const savedCity = document.getElementById('cityValue').value;
const savedDistrict = document.getElementById('districtValue').value;
console.log('初始值:', {savedProvince, savedCity, savedDistrict});
if (savedProvince) {
setTimeout(() => {
setInitialValues(savedProvince, savedCity, savedDistrict);
}, 500); // 增加延迟确保DOM完全准备好
}
console.log('=== 地址表单初始化完成 ===');
});
// 初始化省份列表
function initializeProvinces() {
const provinceSelect = document.getElementById('province');
if (!provinceSelect) {
console.error('省份选择框未找到');
return;
}
console.log('开始初始化省份列表...');
// 清空并添加默认选项
provinceSelect.innerHTML = '';
// 添加所有省份
const provinces = Object.keys(cityData);
console.log('可用省份:', provinces);
provinces.forEach(province => {
const option = document.createElement('option');
option.value = province;
option.textContent = province;
provinceSelect.appendChild(option);
console.log('添加省份:', province);
});
console.log('省份列表初始化完成,总计:', provinces.length, '个');
}
// 设置事件监听器
function setupEventListeners() {
console.log('设置事件监听器...');
// 省份变化事件
const provinceSelect = document.getElementById('province');
if (provinceSelect) {
provinceSelect.addEventListener('change', function() {
const province = this.value;
console.log('选择省份:', province);
updateCities(province);
clearDistricts();
});
}
// 城市变化事件
const citySelect = document.getElementById('city');
if (citySelect) {
citySelect.addEventListener('change', function() {
const province = document.getElementById('province').value;
const city = this.value;
console.log('选择城市:', city, '省份:', province);
updateDistricts(province, city);
});
}
// 表单提交验证
document.getElementById('addressForm').addEventListener('submit', function(e) {
const province = document.getElementById('province').value;
const city = document.getElementById('city').value;
const district = document.getElementById('district').value;
console.log('表单验证:', {province, city, district});
if (!province) {
e.preventDefault();
showAlert('请选择省份', 'warning');
return false;
}
if (!city) {
e.preventDefault();
showAlert('请选择城市', 'warning');
return false;
}
if (!district) {
e.preventDefault();
showAlert('请选择区县', 'warning');
return false;
}
return true;
});
console.log('事件监听器设置完成');
}
// 更新城市列表
function updateCities(province) {
const citySelect = document.getElementById('city');
citySelect.innerHTML = '';
console.log('更新城市列表,省份:', province);
if (!province || !cityData[province]) {
console.log('省份为空或数据不存在');
return;
}
const cities = Object.keys(cityData[province]);
console.log('可用城市:', cities);
cities.forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
console.log('城市列表更新完成,总计:', cities.length, '个');
}
// 更新区县列表
function updateDistricts(province, city) {
const districtSelect = document.getElementById('district');
districtSelect.innerHTML = '';
console.log('更新区县列表,省份:', province, '城市:', city);
if (!province || !city || !cityData[province] || !cityData[province][city]) {
console.log('省份或城市为空或数据不存在');
return;
}
const districts = cityData[province][city];
console.log('可用区县:', districts);
districts.forEach(district => {
const option = document.createElement('option');
option.value = district;
option.textContent = district;
districtSelect.appendChild(option);
});
console.log('区县列表更新完成,总计:', districts.length, '个');
}
// 清空区县列表
function clearDistricts() {
const districtSelect = document.getElementById('district');
districtSelect.innerHTML = '';
console.log('区县列表已清空');
}
// 设置初始值(编辑模式)
function setInitialValues(province, city, district) {
console.log('设置初始值:', {province, city, district});
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const districtSelect = document.getElementById('district');
// 设置省份
if (province && provinceSelect) {
provinceSelect.value = province;
console.log('省份设置为:', province);
updateCities(province);
// 延迟设置城市
setTimeout(() => {
if (city && citySelect) {
citySelect.value = city;
console.log('城市设置为:', city);
updateDistricts(province, city);
// 延迟设置区县
setTimeout(() => {
if (district && districtSelect) {
districtSelect.value = district;
console.log('区县设置为:', district);
}
}, 200);
}
}, 200);
}
}