您的位置：首页 > Web前端 > JavaScript

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

2014-06-26 12:03 603 查看

之前开发项目中，需求涉及到省市县的三级联动下拉框，但是网上的方法多数以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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航