json城市下拉列表

最新推荐文章于 2025-03-26 09:32:35 发布

郑嘉文

最新推荐文章于 2025-03-26 09:32:35 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签：城市下拉列表

本文链接：https://blog.youkuaiyun.com/secretkevin/article/details/50614914

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

该博客展示了如何在网页中使用JavaScript和JSON数据动态创建省份和城市选择下拉列表。通过监听省份选择的变更事件，实时更新城市选项，实现了联动效果。示例代码详细解释了数据结构和DOM操作过程。

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var data = [{code : "001", name : "广东省", cities : [{code : "001001", name : "广州市"},
{code : "001002", name : "深圳市"},
{code : "001003", name : "佛山市"},
{code : "001004", name : "东莞市"}]},
{code : "002", name : "湖南省", cities : [{code : "002001", name : "长沙市"},
{code : "002002", name : "衡阳市"},
{code : "002003", name : "郴州市"},
{code : "002004", name : "永州市"}]},
{code : "003", name : "江西省", cities : [{code : "003001", name : "南昌市"},
{code : "003002", name : "赣州市"},
{code : "003003", name : "九江市"},
{code : "003004", name : "吉安市"}]}];

window.onload = function(){
// 文档一加载完，就填充省份下拉列表
var proSelect = document.getElementById("province");
// 循环data数组
for (var i = 0; i < data.length; i++)
{
// 获取数组元素
var proJson = data[i];
// 创建option
var option = new Option(proJson.name, proJson.code);
// 添加option到下拉列表
proSelect.add(option);
}

proSelect.onchange = function(){
// 获取选中option的value
var proCode = this.value;

// 获取城市下拉列表
var citySelect = document.getElementById("city");

// 先清空
while (citySelect.length > 1)
{
citySelect.remove(citySelect.length - 1);
}

// 循环data数组
for (var i = 0; i < data.length; i++)
{
// 获取数组元素
var proJson = data[i];
if (proJson.code == proCode)
{
// 获取cities数组
var cities = proJson.cities;

for (var j = 0; j < cities.length ; j++)
{
// 获取数组元素
var cityJson = cities[j];
// 创建option
var option = new Option(cityJson.name, cityJson.code);
// 添加option到下拉列表
citySelect.add(option);

}
}
}
};
};
</script>
</head>
<body>
<select id="province">
<option>==请选择省份==</option>
</select>
<select id="city">
<option>==请选择城市==</option>
</select>

</body>
</html>