您的位置：首页 > 数据库

ajax省市联动数据库版demo

2017-02-03 00:00 429 查看

<%@ 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>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市联动数据库版</title>
</head>
<script type="text/javascript">
$(function(){
//当页面加载时候获取省份数据
var uri = "${pageContext.request.contextPath}/selectPro";
//发送ajax
$.get(uri,function(date){
//获取省份对象
var $pro = $("#proId");
//遍历
$(date).each(function(){
$pro.append($("<option value="+this.provinceid+">"+this.name+"</option>"))
});
},"json");
//为省份派发change事件
$("#proId").change(function(){
//获取省份id
var $pid = $(this).val();
//如果是请选择省份，则清除城市
if($pid=="请选择省份"){
$("#cityid option:gt(0)").remove();
}
//发送ajax查询城市
$.get("/day15/selectCity",{"pid":$pid},function(date){
$city = $("#cityid");
if(date != null){
$(date).each(function(){
$city.append($("<option value="+this.cityid+">"+this.name+"</option>"))
});
}
},"json");
});
});
</script>
<body>
<select id="proId" name="province">
<option>请选择省份</option>
</select>
<select id="cityid" name="city">
<option>请选择城市</option>
</select>
</body>
</html>

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

标签： ajax 省市联动

相关文章推荐

新的分享

章节导航