使用了Gson和JSON解析jar包。使用了全国省市县区的数据库。
具体项目案例:点我下载
前台页面简单展示:
<div class="xl-dz">
省份: <select name="province" id="province"
onchange="onSelectChange(this,'city');">
</select> <br /> 城市: <select name="city" id="city"
onchange="onSelectChange(this,'district');">
<option value="">请选择</option>
</select> <br /> 区(县): <select name="district" id="district">
<option value="">请选择</option>
</select>
</div>
JS+Ajax:
实际就是根据前一个输入框的id发送Ajax请求,在后台查询父ID是传入ID的数据集合,然后JSON格式传入前台,JS显示即可。
<script type="text/javascript">
function onSelectChange(obj, toSelId) {
//将select对象传入,传入下一级选项的id字符串,调用下面的方法
setSelect(obj.value,toSelId);
}
function setSelect(fromSelVal, toSelId) {
$.ajax({
url : "user?method=address",
cache : false,/*cache设为false将不缓存此页面 */
data : "parentId=" + fromSelVal,
success : function(data) {
/* 成功调用回调函数 */
createSelectObj(data,toSelId);
}
});
}
function createSelectObj(data, toSelId) {
//解析后台传入的数据,
var arr = jsonParse(data);
//判断数据是否为空
if (arr != null && arr.length > 0) {
//获取下一级id对象
var obj = document.getElementById(toSelId);
//清空操作。
obj.innerHTML="";
//创建请选择option对象。
var nullOp = document.createElement("option");
//设置option的值
nullOp.setAttribute("value", "");
//增加option一个请选择的初始化文本节点
nullOp.appendChild(document.createTextNode("请选择"));
//把option增加到select之上。
obj.appendChild(nullOp);
//循环遍历出后台传过来的json数据
for ( var o in arr) {
//创建option节点对象
var op = document.createElement("option");
//把json中的每一个下标的id传入
op.setAttribute("value", arr[o].id);
//op.text=arr[o].name;//这一句在ie下不起作用,用下面这一句或者innerHTML
//创建文本节点赋值每一个下标的名称
op.appendChild(document.createTextNode(arr[o].name));
//增加子节点
obj.appendChild(op);
}
}
}
//默认设置1级,显示全部省。
setSelect('1', 'province');
</script>
后台Servlet代码:后台简单查询传入的父类ID值
String parentId = request.getParameter("parentId");
if(parentId == null || parentId==""){
parentId = "0";//如果传的父结点为空,则默认赋值为中国的父结点,也就是每一级查询所有省份。
}
Connection conn = null;
String json = "";
try{
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost/forge" , "root" , "root");
Statement stat = conn.createStatement();
ResultSet rs = stat.executeQuery("select region_id,region_name from region where parent_id = "+parentId);
ArrayList rsList = new ArrayList();
Map map = null;
while(rs.next()){
map = new HashMap();
map.put("id", rs.getInt(1));
map.put("name", rs.getString(2));
rsList.add(map);
}
rs=null;
Gson gson = new Gson();
json = gson.toJson(rsList);
System.out.println("json="+json);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally{
if(conn != null){
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
response.setCharacterEncoding("UTF-8");//防止出现中文乱码现象
response.getWriter().print(json);
}