// 地址表单页面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); } }