省市联动效果

现在是 a.jsp
<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
   <!-- 搜索部分 -->
    <div id="search">
        <!-- 省-->
	        <select id="province">
	            <option></option>
	        </select>
	       <!-- 城市-->
	        <select id="city">
              <option></option>
          </select>
          
	        <input type="button" value="搜索" id="search">
    </div>
    
    <!-- 显示结果,现在是空的,会在ajax得到结果以后把 b.jsp中的内容放在这个div中 -->
    <div id="result">
      
    </div>
    
    <script type="text/javascript">
    //给搜索按钮绑定一个点击事件函数
     $("#search").click(search);
     //定义点击事件函数
     function search(){
    	  var provinceId =$("#province").val();
    	  var cityId=$("#city").val();
    	  $.ajax({
    		  type: "POST",
    		   url: "searchCmd",//请求的是一个command,这个command会把搜索结果返回到b.jsp中,所以我们这个ajax请求最后得到的就是b.jsp中的内容
    		   data: "provinceId="+provincId+"&cityId="+cityId,
    		   success: function(msg){//这个msg就是b.jsp里面的内容
    		      alert(msg);
    		      var result='<div id="result">'+msg+'</div>';//把b.jsp里面的内容放到div中
    		      $("#result").replaceWith(result);//把显示结果的div用带显示结果的div替换掉
    		   }
        }
    	  );
      }
    </script>
</body>
</html>





现在是 b.jsp

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@taglib prefix="c" uri="http://com.sum.fdkfjdfkfdf" %>

<!-- 注意b.jsp中不可以有head 也不可以有body  这个页面中的内容会被ajax得到,并填到a.jsp中的结果div中-->
    <form action="editCmd">
      <!-- 一行一行的显示结果 -->
        <c:forEach var="" items="">
          <input type="checkbox">
        </c:forEach>
        
        <!-- 这里是分页的代码 -->
        <div id="page"/>
    </form>

你可能感兴趣的:(效果)