JSON+JS实现省市县三级联动下拉框

时间:2022-04-02 23:07:35

之前开发项目中,需求涉及到省市县的三级联动下拉框,但是网上的方法多数以XML+JS的方法,但是该方法可能会存在浏览器兼容问题,虽然有这个方面的解决方法,但我试过,效果不是很好,于是我找了一个JSON的实现方法,并进行了修改

1、json数据,存放了全国省市县三级的数据。如下为部分数据

2、Area.js,关键的JS代码

3、页面代码(JSP、HTML)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>三级地市联动菜单</title>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script src="${pageContext.request.contextPath}/js/Area.js"></script>

<script type="text/javascript">
$(document).ready(function() {
Area.init('area.json');
var area = new Area('#areaContainer');
area.select([ '请选择', '请选择' ]);

$('#getValueBtn').click(function() {
alert(area.getAddress());
});
});
</script>
<style>
body {
font-size: 14px;
font-family: simsun;
margin: 0;
}
</style>
</head>

<body>
<span id="areaContainer"></span>
<input id="getValueBtn" type="button" value="getValue">
</body>
</html>