<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><th:block th:include="include :: header('新增家庭支出')" /><th:block th:include="include :: datetimepicker-css" /><style>.container {margin: 50px;font-family: sans-serif;}.select-group {display: flex;gap: 20px;margin-bottom: 20px;}select {padding: 8px 12px;border: 1px solid #ddd;border-radius: 4px;min-width: 180px;font-size: 14px;}.result {margin-top: 20px;padding: 10px;border: 1px dashed #666;border-radius: 4px;}</style>
</head>
<body class="white-bg"><div class="wrapper wrapper-content animated fadeInRight ibox-content"><form class="form-horizontal m" id="form-expense-add"><div class="col-xs-12"><div class="form-group"><label class="col-sm-3 control-label is-required">支出金额：</label><div class="col-sm-8"><input name="amount" class="form-control" type="text" required></div></div></div><div class="col-xs-12"><div class="form-group"><label class="col-sm-3 control-label">支出备注：</label><div class="col-sm-8"><textarea name="remark" class="form-control"></textarea></div></div></div><div class="col-xs-12"><div class="form-group"><label class="col-sm-3 control-label">支出地区：</label><input type="hidden" name="region" id="region" /><div class="container"><h3>省-市-区三级联动选择</h3><div class="select-group"><!-- 一级选择：省 --><select id="province"><option value="">请选择省份</option></select><!-- 二级选择：市 --><select id="city" disabled><option value="">请先选择省份</option></select><!-- 三级选择：区 --><select id="district" disabled><option value="">请先选择城市</option></select></div><!-- 选中结果展示 --><div class="result">选中结果：<span id="selectedResult">未选择</span></div></div></div></div><div class="col-xs-12"><div class="form-group"><label class="col-sm-3 control-label is-required">支出时间：</label><div class="col-sm-8"><div class="input-group date"><input name="expenseTime" class="form-control" placeholder="yyyy-MM-dd" type="text" required><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div></div><div class="col-xs-12"><div class="form-group"><label class="col-sm-3 control-label">图片：</label><div class="col-sm-8"><input name="image" class="form-control" type="text"></div></div></div></form></div><th:block th:include="include :: footer" /><th:block th:include="include :: datetimepicker-js" /><script th:inline="javascript">var prefix = ctx + "system_expense/expense"$("#form-expense-add").validate({focusCleanup: true});function submitHandler() {if ($.validate.form()) {$.operate.save(prefix + "/add", $('#form-expense-add').serialize());}}$("input[name='expenseTime']").datetimepicker({format: "yyyy-mm-dd",minView: "month",autoclose: true});//三级联动选择const areaData = {"110000": {name: "北京市",cities: {"110100": {name: "北京市",districts: {"110101": "东城区","110102": "西城区","110105": "朝阳区","110106": "丰台区"}}}},"310000": {name: "上海市",cities: {"310100": {name: "上海市",districts: {"310101": "黄浦区","310104": "徐汇区","310105": "长宁区","310106": "静安区"}}}},"440000": {name: "广东省",cities: {"440100": {name: "广州市",districts: {"440103": "荔湾区","440104": "越秀区","440105": "海珠区"}},"440300": {name: "深圳市",districts: {"440303": "罗湖区","440304": "福田区","440305": "南山区"}}}}};// 获取DOM元素const provinceSelect = document.getElementById('province');const citySelect = document.getElementById('city');const districtSelect = document.getElementById('district');const resultSpan = document.getElementById('selectedResult');// 初始化省份下拉框function initProvince() {// 遍历省份数据，添加到下拉框for (const [code, province] of Object.entries(areaData)) {const option = document.createElement('option');option.value = code; // 存储省份编码option.textContent = province.name; // 显示省份名称provinceSelect.appendChild(option);}}// 根据选中的省份加载城市function loadCities(provinceCode) {// 清空城市和区的下拉框citySelect.innerHTML = '<option value="">请选择城市</option>';districtSelect.innerHTML = '<option value="">请先选择城市</option>';// 禁用/启用城市下拉框if (!provinceCode) {citySelect.disabled = true;districtSelect.disabled = true;return;}citySelect.disabled = false;// 加载对应省份的城市数据const cities = areaData[provinceCode].cities;for (const [code, city] of Object.entries(cities)) {const option = document.createElement('option');option.value = code;option.textContent = city.name;citySelect.appendChild(option);}}// 根据选中的城市加载区function loadDistricts(cityCode, provinceCode) {// 清空区的下拉框districtSelect.innerHTML = '<option value="">请选择区</option>';// 禁用/启用区下拉框if (!cityCode || !provinceCode) {districtSelect.disabled = true;return;}districtSelect.disabled = false;// 加载对应城市的区数据const districts = areaData[provinceCode].cities[cityCode].districts;for (const [code, districtName] of Object.entries(districts)) {const option = document.createElement('option');option.value = code;option.textContent = districtName;districtSelect.appendChild(option);}}// 更新选中结果function updateResult() {const provinceCode = provinceSelect.value;const cityCode = citySelect.value;const districtCode = districtSelect.value;if (!provinceCode) {resultSpan.textContent = '未选择';document.getElementById('region').value = ''; // 清空隐藏字段return;}// 拼接地区字符串（省-市-区）let region = areaData[provinceCode].name;if (cityCode) {region += ' - ' + areaData[provinceCode].cities[cityCode].name;}if (districtCode && cityCode) {region += ' - ' + areaData[provinceCode].cities[cityCode].districts[districtCode];}resultSpan.textContent = region;document.getElementById('region').value = region; // 赋值给隐藏字段}// 绑定事件监听provinceSelect.addEventListener('change', function() {const provinceCode = this.value;loadCities(provinceCode); // 加载对应城市updateResult(); // 更新结果});citySelect.addEventListener('change', function() {const provinceCode = provinceSelect.value;const cityCode = this.value;loadDistricts(cityCode, provinceCode); // 加载对应区updateResult(); // 更新结果});districtSelect.addEventListener('change', function() {updateResult(); // 更新结果});// 初始化页面initProvince();</script>
</body>
</html>