三级联动JQuery

源码地址：https://download.csdn.net/download/qq_43532342/10858690

省市区三千条Sql数据：https://download.csdn.net/download/qq_43532342/10858000

拼接式：

$(function(){
	$.post(
		'province.do',
		function(objs){
			var province=$('#pid');
			for(var i=0;i<objs.length;i++){
				var pid=objs[i].pid;
				var pname=objs[i].pname;
				province.append("<option value='"+pid+"'>"+pname+"</option>");
			}
			
		},'json'
	);
	
})

$(function(){
	$("#pid").change(function(){
		var city=$("#cid");
		$('#cid option:gt(0)').remove();
		var pro=$(this).val();
		
		$.post(
		'city.do?pid='+pro,
		function(objs){
			for(var i=0;i<objs.length;i++){
				var pid=objs[i].cid;
				var pname=objs[i].cname;
				city.append("<option value='"+pid+"'>"+pname+"</option>");
			}
			
		},'json'
	)
	});
})


$(function(){
		$("#cid").change(function(){
		var area=$("#aid");
		$('#aid option:gt(0)').remove();
		var pro=$(this).val();
		
		$.post(
		'area.do?cid='+pro,
		function(objs){
			for(var i=0;i<objs.length;i++){
				var pid=objs[i].aid;
				var pname=objs[i].aname;
				area.append("<option value='"+pid+"'>"+pname+"</option>");
			}
			
		},'json'
	)
	})
})

前端代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

<title>三级联动</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/address.js"></script>
</head>
<body>

<select id="pid" onchange="getCity()">
<option>省</option>
</select>

<select id="cid" onchange="getArea()">
<option>市</option>

</select>

<select id="aid">
<option>区</option>

</select>

</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>hc.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  <servlet-name>area</servlet-name>
  <servlet-class>com.hc.servlet.area</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>area</servlet-name>
  <url-pattern>/area.do</url-pattern>
  </servlet-mapping>
  
  <servlet>
  <servlet-name>city</servlet-name>
  <servlet-class>com.hc.servlet.city</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>city</servlet-name>
  <url-pattern>/city.do</url-pattern>
  </servlet-mapping>
  
  <servlet>
  <servlet-name>province</servlet-name>
  <servlet-class>com.hc.servlet.province</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>province</servlet-name>
  <url-pattern>/province.do</url-pattern>
  </servlet-mapping>
  
</web-app>

猜你喜欢