jquery select 选中表单特效select城市选择三级联动

ziblog

已于 2025-06-27 15:32:59 修改

阅读量818

点赞数 21

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

于 2025-04-28 14:48:18 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147587445

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 三级联动城市选择</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 30px auto;
padding: 25px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #34495e;
}
select {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
background-color: #fff;
transition: border-color 0.3s;
}
select:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
.result {
margin-top: 30px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 4px;
border-left: 4px solid #3498db;
}
.footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 14px;
}
.footer a {
color: #e74c3c;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>省市区三级联动选择</h1>

<div class="form-group">
<label for="province">省份</label>
<select id="province">
<option value="">请选择省份</option>
</select>
</div>

<div class="form-group">
<label for="city">城市</label>
<select id="city" disabled>
<option value="">请选择城市</option>
</select>
</div>

<div class="form-group">
<label for="district">区县</label>
<select id="district" disabled>
<option value="">请选择区县</option>
</select>
</div>

<div class="result" id="result">
请选择完整的省市区信息...
</div>

<div class="footer">

</div>
</div>

<script>
$(document).ready(function() {
// 省份数据
const provinceData = [
{code: 'bj', name: '北京市'},
{code: 'sh', name: '上海市'},
{code: 'zj', name: '浙江省'},
{code: 'gd', name: '广东省'},
{code: 'js', name: '江苏省'}
];

// 城市数据
const cityData = {
'bj': [
{code: 'bj-1', name: '东城区'},
{code: 'bj-2', name: '西城区'},
{code: 'bj-3', name: '朝阳区'}
],
'sh': [
{code: 'sh-1', name: '黄浦区'},
{code: 'sh-2', name: '徐汇区'},
{code: 'sh-3', name: '长宁区'}
],
'zj': [
{code: 'zj-1', name: '杭州市'},
{code: 'zj-2', name: '宁波市'},
{code: 'zj-3', name: '温州市'}
],
'gd': [
{code: 'gd-1', name: '广州市'},
{code: 'gd-2', name: '深圳市'},
{code: 'gd-3', name: '珠海市'}
],
'js': [
{code: 'js-1', name: '南京市'},
{code: 'js-2', name: '苏州市'},
{code: 'js-3', name: '无锡市'}
]
};

// 区县数据
const districtData = {
'bj-1': [
{code: 'bj-1-1', name: '东华门街道'},
{code: 'bj-1-2', name: '景山街道'},
{code: 'bj-1-3', name: '交道口街道'}
],
'bj-2': [
{code: 'bj-2-1', name: '西长安街街道'},
{code: 'bj-2-2', name: '新街口街道'},
{code: 'bj-2-3', name: '月坛街道'}
],
'bj-3': [
{code: 'bj-3-1', name: '建外街道'},
{code: 'bj-3-2', name: '朝外街道'},
{code: 'bj-3-3', name: '三里屯街道'}
],
'sh-1': [
{code: 'sh-1-1', name: '南京东路街道'},
{code: 'sh-1-2', name: '外滩街道'},
{code: 'sh-1-3', name: '半淞园路街道'}
],
'sh-2': [
{code: 'sh-2-1', name: '徐家汇街道'},
{code: 'sh-2-2', name: '天平路街道'},
{code: 'sh-2-3', name: '枫林路街道'}
],
'sh-3': [
{code: 'sh-3-1', name: '华阳路街道'},
{code: 'sh-3-2', name: '江苏路街道'},
{code: 'sh-3-3', name: '新华路街道'}
],
'zj-1': [
{code: 'zj-1-1', name: '上城区'},
{code: 'zj-1-2', name: '下城区'},
{code: 'zj-1-3', name: '西湖区'}
],
'zj-2': [
{code: 'zj-2-1', name: '海曙区'},
{code: 'zj-2-2', name: '江东区'},
{code: 'zj-2-3', name: '江北区'}
],
'zj-3': [
{code: 'zj-3-1', name: '鹿城区'},
{code: 'zj-3-2', name: '龙湾区'},
{code: 'zj-3-3', name: '瓯海区'}
],
'gd-1': [
{code: 'gd-1-1', name: '越秀区'},
{code: 'gd-1-2', name: '荔湾区'},
{code: 'gd-1-3', name: '海珠区'}
],
'gd-2': [
{code: 'gd-2-1', name: '福田区'},
{code: 'gd-2-2', name: '罗湖区'},
{code: 'gd-2-3', name: '南山区'}
],
'gd-3': [
{code: 'gd-3-1', name: '香洲区'},
{code: 'gd-3-2', name: '斗门区'},
{code: 'gd-3-3', name: '金湾区'}
],
'js-1': [
{code: 'js-1-1', name: '玄武区'},
{code: 'js-1-2', name: '秦淮区'},
{code: 'js-1-3', name: '建邺区'}
],
'js-2': [
{code: 'js-2-1', name: '姑苏区'},
{code: 'js-2-2', name: '虎丘区'},
{code: 'js-2-3', name: '吴中区'}
],
'js-3': [
{code: 'js-3-1', name: '梁溪区'},
{code: 'js-3-2', name: '滨湖区'},
{code: 'js-3-3', name: '新吴区'}
]
};

// 初始化省份下拉框
$.each(provinceData, function(index, item) {
$('#province').append('<option value="' + item.code + '">' + item.name + '</option>');
});

// 省份选择变化时
$('#province').change(function() {
const provinceCode = $(this).val();

// 清空并禁用城市和区县下拉框
$('#city').empty().append('<option value="">请选择城市</option>').prop('disabled', true);
$('#district').empty().append('<option value="">请选择区县</option>').prop('disabled', true);

if (provinceCode) {
// 启用城市下拉框
$('#city').prop('disabled', false);

// 填充城市数据
const cities = cityData[provinceCode];
$.each(cities, function(index, item) {
$('#city').append('<option value="' + item.code + '">' + item.name + '</option>');
});
}

updateResult();
});

// 城市选择变化时
$('#city').change(function() {
const cityCode = $(this).val();

// 清空并禁用区县下拉框
$('#district').empty().append('<option value="">请选择区县</option>').prop('disabled', true);

if (cityCode) {
// 启用区县下拉框
$('#district').prop('disabled', false);

// 填充区县数据
const districts = districtData[cityCode];
$.each(districts, function(index, item) {
$('#district').append('<option value="' + item.code + '">' + item.name + '</option>');
});
}

updateResult();
});

// 区县选择变化时
$('#district').change(function() {
updateResult();
});

// 更新结果显示
function updateResult() {
const province = $('#province option:selected').text();
const city = $('#city option:selected').text();
const district = $('#district option:selected').text();

if (province && province !== '请选择省份') {
let resultText = '您选择了：' + province;

if (city && city !== '请选择城市') {
resultText += ' - ' + city;

if (district && district !== '请选择区县') {
resultText += ' - ' + district;
}
}

$('#result').text(resultText);
} else {
$('#result').text('请选择完整的省市区信息...');
}
}
});
</script>
</body>
</html>