ajax省市联动数据库版demo

最新推荐文章于 2024-10-08 15:41:48 发布

weixin_34252090

最新推荐文章于 2024-10-08 15:41:48 发布

阅读量102

点赞数

文章标签：数据库 javascript json ViewUI

原文链接：https://my.oschina.net/xhe2016/blog/831358

版权

2019独角兽企业重金招聘Python工程师标准>>>

<%@ 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>