<!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>
浙公网安备 33010602011771号