省市级联

最新推荐文章于 2025-06-24 12:38:21 发布

最新推荐文章于 2025-06-24 12:38:21 发布 · 236 阅读

文章标签：

#省市级联

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的省市级联效果。通过预先定义的省份及其对应城市的数据结构，当用户选择某个省份时，相应的城市列表会自动更新显示。此方案适用于需要地区级联选择功能的在线表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>省市级联</title>
</head>
<body>
<script language="javascript">
/*
实现省市级联效果
*/
var provinces={
安徽省:["安庆市","蚌埠市","巢湖地区","池州地区","滁州市","阜阳地区","合肥市","淮北市","淮南市","黄山市","六安地区","马鞍山市","宿县地区","铜陵市","芜湖市","宣城地区"],
湖北省:["鄂西土家族苗族自治州","鄂州市","黄冈地区","黄石市","荆门市","荆州地区","沙市市","省直辖行政单位","十堰市","武汉市","咸宁地区","襄樊市","孝感地区","宜昌市","郧阳地区"],
湖南省:["长沙市","常德市","郴州地区","大庸市","衡阳市","怀化地区","零陵地区","娄底地区","邵阳市","湘潭市","湘西土家族苗族自治州","益阳地区","岳阳市","株洲市"],
河南省:["安阳市","鹤壁市","焦作市","开封市","洛阳市","漯河市","南阳地区","平顶山市","濮阳市","三门峡市","商丘地区","新乡市","信阳地区","许昌市","郑州市","周口地区","驻马店地区"],
河北省:["保定地区","保定市","沧州地区","沧州市","承德地区","承德市","邯郸地区","邯郸市","衡水地区","廊坊市","秦皇岛市","石家庄地区","石家庄市","唐山市","邢台地区","邢台市","张家口地区","张家口市"],
甘肃省:["白银市","定西地区","甘南藏族自治州","嘉峪关市","金昌市","酒泉地区","兰州市","临夏回族自治州","陇南地区","平凉地区","庆阳地区","天水市","武威地区","张掖地区"],
广东省:["潮州市","东莞市","佛山市","广州市","河源市","惠州市","江门市","揭阳市","茂名市","梅州市","清远市","汕头市","汕尾市","韶关市","深圳市","阳江市","湛江市","肇庆市","中山市","珠海市"],
广西省:["百色地区","北海市","桂林地区","桂林市","河池地区","柳州地区","柳州市","南宁地区","南宁市","钦州地区","梧州地区","梧州市","玉林地区"],
山东省:["滨州地区","德州地区","东营市","菏泽地区","济南市","济宁市","莱芜市","聊城地区","临沂地区","青岛市","日照市","泰安市","威海市","潍坊市","烟台市","枣庄市","淄博市"],
山西省:["长治市","大同市","晋城市","晋中地区","临汾地区","吕梁地区","朔州市","太原市","忻州地区","雁北地区","阳泉市","运城地区"]
};
//加载省
function loadProvince()
{
//获取省所对应的列表框对象
var pro=document.getElementById("province");
//从数组中提取省份信息
for(var p in provinces)
{
//创建option元素
var opt=document.createElement("option");
//设置option元素中的信息
opt.innerText=p;
opt.value=p;
//将option元素添加到select元素中(option是select的子节点)
pro.appendChild(opt);
}
}
//加载市
function loadCity()
{
//获取用户的省份
var selectProvince=document.getElementById("province").value;
//根据省获取市(citys是一个数组)
var citys=provinces[selectProvince];
//获取市所对应的列表框对象
var city=document.getElementById("city");
//将元素列表框中的元素全部清空
city.innerText="";

var opt=document.createElement("option");
opt.innerText="--请选择城市--";
opt.value="0";
city.appendChild(opt);
for(var index=0;index<citys.length;index++)
{
opt=document.createElement("option");
opt.innerText=citys[index];
opt.value=citys[index];
city.appendChild(opt);
}
}
//在窗口加载时添加省份信息
window.onload=loadProvince;
</script>
<select id="province" onchange="loadCity();">
<option value="0">--请选择省份--</option>
</select>
<select id="city">
<option value="0">--请选择城市--</option>
</select>
</body>
</html>